* {
  box-sizing: border-box;
}

:root {
  --bg0: #030817;
  --bg1: #061329;
  --glass: rgba(255, 255, 255, 0.075);
  --glass-soft: rgba(255, 255, 255, 0.045);
  --line: rgba(255, 255, 255, 0.14);
  --cyan: #57e8ff;
  --blue: #5c8dff;
  --purple: #a86bff;
  --green: #65ffc7;
  --text: #eef7ff;
  --muted: #a9b8ce;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background:
    radial-gradient(circle at 18% 8%, rgba(89, 232, 255, 0.18), transparent 32%),
    radial-gradient(circle at 82% 14%, rgba(168, 107, 255, 0.17), transparent 28%),
    radial-gradient(circle at 70% 86%, rgba(101, 255, 199, 0.10), transparent 26%),
    linear-gradient(135deg, #061126 0%, #020612 52%, #06101f 100%);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.05) 44%, transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 90px);
  opacity: 0.65;
  z-index: 0;
}

#intro,
.login-contenedor,
.app-panel,
.modal {
  position: relative;
  z-index: 1;
}

/* INTRO */
#intro {
  position: fixed;
  inset: 0;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#videoIntro {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oculto { display: none !important; }

/* LOGIN GLASS */
.login-contenedor {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(36, 177, 255, 0.24), transparent 38%),
    radial-gradient(circle at bottom right, rgba(157, 99, 255, 0.22), transparent 34%),
    rgba(2, 8, 18, 0.92);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9000;
}

.login-card,
.topbar,
.modulo-card,
.modal-contenido,
.resumen-card,
.tabla-scroll {
  background: linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035));
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(255,255,255,0.04),
    0 18px 45px rgba(0,0,0,0.35),
    0 0 28px rgba(87, 232, 255, 0.10);
}

.login-card {
  width: 390px;
  max-width: calc(100vw - 30px);
  padding: 36px;
  border-radius: 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.login-card::after,
.modulo-card::after,
.modal-contenido::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,0.14), transparent 28%, transparent 62%, rgba(255,255,255,0.06));
  opacity: 0.55;
}

.login-card h1 {
  margin: 0 0 8px;
  background: linear-gradient(90deg, var(--cyan), var(--purple), var(--green));
  -webkit-background-clip: text;
  color: transparent;
}

.login-card p, .login-card small { color: var(--muted); }

.login-card input,
.input-modal {
  width: 100%;
  padding: 14px;
  margin-bottom: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(7, 17, 37, 0.56);
  color: white;
  outline: none;
  box-shadow: inset 0 0 18px rgba(0,0,0,0.20);
}

.login-card input:focus,
.input-modal:focus {
  border-color: rgba(87, 232, 255, 0.65);
  box-shadow: 0 0 0 3px rgba(87, 232, 255, 0.08), inset 0 0 18px rgba(0,0,0,0.22);
}

.login-card button,
.btn-top,
.modulo-card button,
.btn-modal,
.btn-cerrar-pro {
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(135deg, rgba(87,232,255,0.92), rgba(168,107,255,0.78));
  color: #061126;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(87,232,255,0.28), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.login-card button:hover,
.btn-top:hover,
.modulo-card button:hover,
.btn-modal:hover,
.btn-cerrar-pro:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
  box-shadow: 0 0 30px rgba(87,232,255,0.38), 0 0 18px rgba(168,107,255,0.25);
}

.login-card button {
  width: 100%;
  padding: 14px;
  border-radius: 18px;
}

/* PANEL */
.app-panel {
  min-height: 100vh;
  background: transparent;
}

.topbar {
  min-height: 82px;
  margin: 22px auto 0;
  width: min(1180px, calc(100% - 34px));
  padding: 12px 18px;
  border-radius: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand { display: flex; align-items: center; gap: 14px; }

.logo-circle {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(87,232,255,0.28), rgba(168,107,255,0.28));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 0 20px rgba(87,232,255,0.24), inset 0 0 18px rgba(255,255,255,0.08);
  color: white;
  font-weight: 900;
  letter-spacing: 1px;
}

.brand h2 { margin: 0; font-size: 18px; letter-spacing: 1px; }
.brand p { margin: 2px 0 0; color: var(--muted); }
.user-info { text-align: right; color: #d7e6ff; }
.user-info span { display: block; margin-top: 4px; color: var(--muted); }

.dashboard {
  padding: 34px 6% 50px;
  width: min(1220px, 100%);
  margin: 0 auto;
}

.dashboard-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-bottom: 28px;
}

.btn-top {
  padding: 13px 24px;
  border-radius: 999px;
}

.welcome {
  text-align: center;
  margin-bottom: 36px;
}

.welcome h1 {
  margin: 0;
  font-size: clamp(32px, 5vw, 48px);
  background: linear-gradient(90deg, var(--cyan), var(--purple), var(--green));
  -webkit-background-clip: text;
  color: transparent;
}

.welcome p { color: var(--muted); font-size: 17px; }

/* MODULOS */
.modulos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.modulo-card {
  min-height: 242px;
  padding: 26px;
  border-radius: 28px;
  text-align: center;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  position: relative;
  overflow: hidden;
}

.modulo-card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(87,232,255,0.36);
  box-shadow: 0 24px 60px rgba(0,0,0,0.44), 0 0 38px rgba(87,232,255,0.18), 0 0 28px rgba(168,107,255,0.14);
}

.icono-glass {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  background: linear-gradient(135deg, rgba(87,232,255,0.22), rgba(168,107,255,0.20));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 22px rgba(87,232,255,0.18);
}

.modulo-card h3 { font-size: 22px; margin: 0 0 10px; }
.modulo-card p { color: var(--muted); min-height: 42px; }
.modulo-card button { margin-top: 16px; padding: 12px 28px; border-radius: 999px; }

/* MODAL */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 9500;
  overflow-y: auto;
  padding: 24px 12px;
}

.modal-contenido {
  padding: 26px;
  border-radius: 28px;
  width: 520px;
  max-width: 90%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  position: relative;
}

.modal-header-pro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.modal-header-pro h2 { margin: 4px 0 0; }
.modal-header-pro .nota { margin: 8px 0 0; }

.modal-etiqueta {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(87,232,255,0.30);
  color: #b9f8ff;
  background: rgba(87,232,255,0.08);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.btn-cerrar-pro {
  flex: 0 0 auto;
  color: white;
  background: linear-gradient(135deg, rgba(87,232,255,0.18), rgba(168,107,255,0.18));
  padding: 10px 16px;
  border-radius: 999px;
}

.cerrar { display: none; }
.input-modal option { color: black; }
.btn-modal { width: 100%; padding: 14px; border-radius: 16px; }
.nota { color: var(--muted); font-size: 13px; }

/* FOTO */
.label-foto { display: block; cursor: pointer; text-align: center; }
.preview-foto-contenedor { display: flex; justify-content: center; margin: 8px 0 12px; }
.preview-foto {
  width: 96px; height: 96px; object-fit: cover; border-radius: 50%;
  border: 2px solid rgba(87,232,255,0.65);
  box-shadow: 0 0 22px rgba(87,232,255,0.24);
}

/* LISTA */
.modal-grande {
  width: 1120px;
  max-width: 96%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.usuarios-toolbar {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 12px;
  align-items: center;
  margin: 15px 0;
}
.btn-recargar { margin-bottom: 12px; }

.tabla-scroll {
  flex: 1;
  min-height: 260px;
  overflow: auto;
  border-radius: 20px;
}

.tabla-scroll::-webkit-scrollbar,
.modal-contenido::-webkit-scrollbar { width: 10px; height: 10px; }
.tabla-scroll::-webkit-scrollbar-thumb,
.modal-contenido::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(87,232,255,0.65), rgba(168,107,255,0.55));
  border-radius: 999px;
}
.tabla-scroll::-webkit-scrollbar-track,
.modal-contenido::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); }

.tabla-usuarios {
  width: 100%;
  border-collapse: collapse;
  background: rgba(3, 11, 25, 0.35);
}
.tabla-usuarios th,
.tabla-usuarios td {
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #e8f7ff;
  text-align: left;
  vertical-align: middle;
}
.tabla-usuarios th {
  position: sticky;
  top: 0;
  background: rgba(8, 20, 44, 0.92);
  backdrop-filter: blur(10px);
  color: var(--cyan);
  z-index: 1;
}
.tabla-usuarios tr:hover td { background: rgba(87,232,255,0.035); }

.foto-tabla {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(87,232,255,0.65);
  box-shadow: 0 0 14px rgba(87,232,255,0.20);
}
.foto-vacia { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); font-size: 22px; }

.badge-estado,
.badge-tipo,
.chip-proyecto {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: bold;
  font-size: 12px;
}
.estado-activo { background: rgba(101,255,199,0.15); color: #9fffe0; border: 1px solid rgba(101,255,199,0.35); }
.estado-inactivo { background: rgba(255,90,90,0.14); color: #ffadad; border: 1px solid rgba(255,90,90,0.35); }
.badge-tipo { background: rgba(87,232,255,0.12); color: #b9f8ff; border: 1px solid rgba(87,232,255,0.3); }

.resumen-usuarios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.resumen-card { padding: 14px; border-radius: 20px; }
.resumen-card strong, .resumen-card span { display: block; }
.resumen-card span { margin-top: 6px; color: #cdeeff; }
.chips-proyectos { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.chip-proyecto { background: rgba(168,107,255,0.16); color: #eadfff; border: 1px solid rgba(168,107,255,0.3); }

/* CORRECCION FUERTE SCROLL USUARIOS */
#modalVerUsuarios { align-items: stretch; }
#modalVerUsuarios .modal-grande {
  height: calc(100vh - 48px);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#modalVerUsuarios .modal-header-pro,
#modalVerUsuarios .usuarios-toolbar,
#modalVerUsuarios .resumen-usuarios { flex: 0 0 auto; }
#modalVerUsuarios .tabla-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: auto;
}
#modalVerUsuarios .tabla-usuarios { min-width: 980px; }

@media (max-width: 1100px) { .modulos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .modal { padding: 10px 6px; }
  .modal-contenido { max-height: calc(100vh - 20px); }
  .usuarios-toolbar, .resumen-usuarios { grid-template-columns: 1fr; }
  .tabla-usuarios { min-width: 900px; }
  .modal-header-pro { flex-direction: column; }
  .btn-cerrar-pro { width: 100%; }
}
@media (max-width: 650px) {
  .modulos { grid-template-columns: 1fr; }
  .dashboard-actions { flex-direction: column; }
}

/* ================================
   SISTEMA DE 19 TEMAS SOFTWARE ESM
   ================================ */
body.tema-futurista {
  --bg0: #030817; --bg1: #061329; --glass: rgba(255,255,255,.075); --glass-soft: rgba(255,255,255,.045);
  --line: rgba(255,255,255,.14); --cyan:#57e8ff; --blue:#5c8dff; --purple:#a86bff; --green:#65ffc7;
  --text:#eef7ff; --muted:#a9b8ce;
  background: radial-gradient(circle at 18% 8%, rgba(89,232,255,.18), transparent 32%), radial-gradient(circle at 82% 14%, rgba(168,107,255,.17), transparent 28%), radial-gradient(circle at 70% 86%, rgba(101,255,199,.10), transparent 26%), linear-gradient(135deg,#061126 0%,#020612 52%,#06101f 100%);
}
body.tema-neo-tactile {
  --bg0:#101b2b; --bg1:#24354a; --glass:rgba(210,230,245,.18); --glass-soft:rgba(185,210,230,.10);
  --line:rgba(225,245,255,.20); --cyan:#68f7ff; --blue:#4f82ff; --purple:#9ab0ff; --green:#73ffd8;
  --text:#f5fbff; --muted:#c1cedd;
  background: radial-gradient(circle at 8% 4%, rgba(230,245,255,.32), transparent 30%), radial-gradient(circle at 88% 18%, rgba(85,140,255,.22), transparent 34%), linear-gradient(135deg,#0b111c 0%,#1e3147 55%,#07101b 100%);
}
body.tema-liquid-dark {
  --bg0:#05080d; --bg1:#131a26; --glass:rgba(255,255,255,.12); --glass-soft:rgba(255,255,255,.06);
  --line:rgba(210,235,255,.25); --cyan:#8beaff; --blue:#3289ff; --purple:#ba71ff; --green:#48f0c6;
  --text:#f7fbff; --muted:#b7c2cf;
  background: radial-gradient(circle at 12% 80%, rgba(255,255,255,.20), transparent 22%), radial-gradient(circle at 85% 20%, rgba(64,145,255,.26), transparent 30%), linear-gradient(145deg,#dde8f2 0%,#52677a 8%,#07101a 42%,#03060b 100%);
}
body.tema-neon-glass {
  --bg0:#04050c; --bg1:#100724; --glass:rgba(255,255,255,.08); --glass-soft:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.18); --cyan:#30f7ff; --blue:#1678ff; --purple:#d05cff; --green:#39ffd2;
  --text:#fff7ff; --muted:#c9b9d8;
  background: radial-gradient(circle at 8% 18%, rgba(48,247,255,.25), transparent 28%), radial-gradient(circle at 82% 20%, rgba(208,92,255,.28), transparent 26%), radial-gradient(circle at 80% 90%, rgba(255,151,64,.20), transparent 30%), linear-gradient(135deg,#050713 0%,#12051f 55%,#08020f 100%);
}
body.tema-blueprint {
  --bg0:#092630; --bg1:#123b45; --glass:rgba(27,102,115,.20); --glass-soft:rgba(20,76,88,.14);
  --line:rgba(143,255,244,.24); --cyan:#61fff1; --blue:#2ea2c5; --purple:#ffd38d; --green:#83ffd7;
  --text:#eafff9; --muted:#a8cec9;
  background: repeating-linear-gradient(90deg,rgba(135,255,242,.06) 0 1px, transparent 1px 48px), repeating-linear-gradient(0deg,rgba(135,255,242,.05) 0 1px, transparent 1px 48px), radial-gradient(circle at 72% 18%, rgba(255,214,150,.18), transparent 28%), linear-gradient(135deg,#0b303a 0%,#08212a 52%,#06151c 100%);
}
body.tema-aegis {
  --bg0:#e7d7c8; --bg1:#c4b3a7; --glass:rgba(255,242,229,.58); --glass-soft:rgba(255,232,211,.36);
  --line:rgba(72,49,38,.26); --cyan:#008e93; --blue:#125b64; --purple:#d43eff; --green:#0ed9c2;
  --text:#16120f; --muted:#5f5048;
  background: repeating-linear-gradient(90deg,rgba(95,70,55,.05) 0 1px, transparent 1px 44px), repeating-linear-gradient(0deg,rgba(95,70,55,.045) 0 1px, transparent 1px 44px), radial-gradient(circle at 12% 88%, rgba(0,190,180,.15), transparent 25%), linear-gradient(135deg,#f1e4d8 0%,#cdb8a8 58%,#a69082 100%);
}
body.tema-soft-light {
  --bg0:#f5d995; --bg1:#f7e9be; --glass:rgba(255,255,255,.70); --glass-soft:rgba(255,255,255,.46);
  --line:rgba(120,83,31,.18); --cyan:#16c9cc; --blue:#0e9ca3; --purple:#f28b23; --green:#12b8a6;
  --text:#261f18; --muted:#75614a;
  background: repeating-linear-gradient(90deg,rgba(136,103,39,.08) 0 1px, transparent 1px 52px), repeating-linear-gradient(0deg,rgba(136,103,39,.06) 0 1px, transparent 1px 52px), linear-gradient(135deg,#fff3cf 0%,#f3c971 100%);
}
body.tema-foundation {
  --bg0:#fff6ea; --bg1:#f3dfcb; --glass:rgba(255,255,255,.78); --glass-soft:rgba(255,255,255,.52);
  --line:rgba(95,64,43,.15); --cyan:#079b9a; --blue:#007a87; --purple:#c2663c; --green:#0bb0a7;
  --text:#2a2017; --muted:#826c5b;
  background: radial-gradient(circle at 88% 92%, rgba(0,180,190,.20), transparent 25%), radial-gradient(circle at 8% 5%, rgba(255,150,80,.18), transparent 26%), linear-gradient(145deg,#fffaf1 0%,#efd7bf 100%);
}
body.tema-liquid-light {
  --bg0:#edf4fb; --bg1:#ffffff; --glass:rgba(255,255,255,.62); --glass-soft:rgba(255,255,255,.42);
  --line:rgba(73,98,128,.18); --cyan:#1fc8ff; --blue:#0878e8; --purple:#9d4cff; --green:#2bd7b4;
  --text:#151d2a; --muted:#5a687a;
  background: radial-gradient(circle at 12% 14%, rgba(31,200,255,.18), transparent 28%), radial-gradient(circle at 92% 78%, rgba(255,170,63,.22), transparent 30%), linear-gradient(145deg,#ffffff 0%,#eaf2fb 60%,#dce8f5 100%);
}

body.tema-stone-tactical {
  --bg0:#1b1a15; --bg1:#3b3328; --glass:rgba(120,118,102,.28); --glass-soft:rgba(80,78,68,.18);
  --line:rgba(225,214,185,.22); --cyan:#d2c4a2; --blue:#8e8b76; --purple:#6f4c3d; --green:#9fa58d;
  --text:#f3ead7; --muted:#c2b69c;
  background: radial-gradient(circle at 50% 0%, rgba(255,230,180,.18), transparent 22%), repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 70px), linear-gradient(135deg,#151410 0%,#3a3024 45%,#171813 100%);
}
body.tema-smoke-prism {
  --bg0:#04050d; --bg1:#15182d; --glass:rgba(120,135,190,.16); --glass-soft:rgba(100,110,160,.08);
  --line:rgba(160,190,255,.24); --cyan:#68fff7; --blue:#7788ff; --purple:#f078ff; --green:#7dffd5;
  --text:#f6f8ff; --muted:#aeb4d2;
  background: radial-gradient(circle at 10% 8%, rgba(130,170,255,.20), transparent 28%), radial-gradient(circle at 83% 14%, rgba(255,120,255,.18), transparent 30%), radial-gradient(circle at 78% 84%, rgba(80,255,225,.18), transparent 24%), linear-gradient(135deg,#03050c 0%,#11142a 55%,#060810 100%);
}
body.tema-glass-matrix {
  --bg0:#0a1118; --bg1:#263746; --glass:rgba(140,170,190,.18); --glass-soft:rgba(90,120,140,.10);
  --line:rgba(205,235,255,.25); --cyan:#d4f2ff; --blue:#83b6de; --purple:#a6bfd6; --green:#a0d8ff;
  --text:#edf6ff; --muted:#b2c0cb;
  background: radial-gradient(circle at 35% 22%, rgba(230,250,255,.16), transparent 28%), radial-gradient(circle at 74% 57%, rgba(130,180,215,.18), transparent 30%), linear-gradient(135deg,#05090e 0%,#182533 55%,#080d13 100%);
}
body.tema-security-hologram {
  --bg0:#111327; --bg1:#252a48; --glass:rgba(70,95,150,.20); --glass-soft:rgba(50,65,110,.12);
  --line:rgba(115,255,227,.24); --cyan:#70ffdf; --blue:#6c8cff; --purple:#8690ff; --green:#64ffc9;
  --text:#eef8ff; --muted:#b9c2dc;
  background: radial-gradient(circle at 25% 65%, rgba(100,255,220,.22), transparent 24%), radial-gradient(circle at 70% 30%, rgba(110,140,255,.22), transparent 30%), linear-gradient(135deg,#0d1021 0%,#26294a 60%,#151525 100%);
}
body.tema-red-carbon {
  --bg0:#05070a; --bg1:#151a22; --glass:rgba(255,255,255,.08); --glass-soft:rgba(255,255,255,.04);
  --line:rgba(255,70,70,.28); --cyan:#f3f7ff; --blue:#8a95aa; --purple:#ff3d48; --green:#ff6464;
  --text:#f8f9ff; --muted:#aeb3bd;
  background: radial-gradient(circle at 72% 22%, rgba(255,35,45,.25), transparent 28%), radial-gradient(circle at 16% 78%, rgba(255,25,35,.18), transparent 24%), linear-gradient(135deg,#04060a 0%,#121722 55%,#050507 100%);
}
body.tema-dark-neon-kit {
  --bg0:#202124; --bg1:#303035; --glass:rgba(255,255,255,.07); --glass-soft:rgba(255,255,255,.035);
  --line:rgba(110,240,255,.24); --cyan:#31edff; --blue:#5c84ff; --purple:#9d4cff; --green:#50ffd5;
  --text:#f2f5ff; --muted:#aeb2bb;
  background: radial-gradient(circle at 18% 22%, rgba(49,237,255,.18), transparent 22%), radial-gradient(circle at 82% 30%, rgba(157,76,255,.18), transparent 24%), linear-gradient(145deg,#191a1f 0%,#2e2f34 58%,#111217 100%);
}
body.tema-pastel-liquid {
  --bg0:#f8e4e8; --bg1:#cdeeff; --glass:rgba(255,255,255,.62); --glass-soft:rgba(255,255,255,.40);
  --line:rgba(95,120,160,.16); --cyan:#43f5ec; --blue:#5a86ff; --purple:#d457ff; --green:#29d9be;
  --text:#111827; --muted:#607084;
  background: radial-gradient(circle at 12% 15%, rgba(255,160,170,.34), transparent 30%), radial-gradient(circle at 86% 22%, rgba(60,245,235,.33), transparent 30%), radial-gradient(circle at 82% 90%, rgba(140,80,255,.24), transparent 28%), linear-gradient(145deg,#fff5f4 0%,#dff3ff 70%,#f3e5ff 100%);
}
body.tema-aqua-display {
  --bg0:#d6e0e4; --bg1:#8fa3a7; --glass:rgba(235,250,250,.48); --glass-soft:rgba(210,230,230,.30);
  --line:rgba(20,220,225,.22); --cyan:#1ce8ee; --blue:#60aebf; --purple:#91a6aa; --green:#68fff0;
  --text:#f8ffff; --muted:#dbe8e8;
  background: radial-gradient(circle at 18% 28%, rgba(28,232,238,.22), transparent 25%), linear-gradient(135deg,#d4dcde 0%,#97a5a7 45%,#6b7476 100%);
}
body.tema-frosted-neon {
  --bg0:#c9d0d6; --bg1:#5b6370; --glass:rgba(210,220,230,.42); --glass-soft:rgba(190,205,215,.25);
  --line:rgba(235,245,255,.30); --cyan:#7afff1; --blue:#4b76ff; --purple:#ff4fe7; --green:#ff695e;
  --text:#ffffff; --muted:#e4e8ee;
  background: radial-gradient(circle at 12% 62%, rgba(255,90,100,.28), transparent 30%), radial-gradient(circle at 86% 62%, rgba(110,90,255,.30), transparent 28%), linear-gradient(145deg,#cbd2d8 0%,#777f8d 60%,#4a4f58 100%);
}
body.tema-black-chrome {
  --bg0:#f4ede5; --bg1:#eee1d0; --glass:rgba(18,18,20,.84); --glass-soft:rgba(255,255,255,.18);
  --line:rgba(255,255,255,.22); --cyan:#00e9ff; --blue:#0b74ff; --purple:#f05cff; --green:#ff9d2e;
  --text:#ffffff; --muted:#d8d8df;
  background: radial-gradient(circle at 12% 80%, rgba(255,149,0,.22), transparent 24%), radial-gradient(circle at 82% 82%, rgba(0,213,255,.22), transparent 24%), linear-gradient(145deg,#f8eee0 0%,#e7d8c9 100%);
}

/* Controles del selector de temas */
.topbar-right { display:flex; align-items:center; gap:14px; }
.theme-control {
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px;
  background: var(--glass-soft); border:1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.theme-control label { font-size:12px; color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.theme-select {
  max-width: 205px; padding:9px 12px; border-radius:999px; border:1px solid var(--line);
  color: var(--text); background: var(--glass); outline:none; font-weight:800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.theme-select option { color:#111; }

/* Los temas claros necesitan texto oscuro en varios componentes */
body.tema-aegis .login-card,
body.tema-aegis .topbar,
body.tema-aegis .modulo-card,
body.tema-aegis .modal-contenido,
body.tema-aegis .resumen-card,
body.tema-aegis .tabla-scroll,
body.tema-soft-light .login-card,
body.tema-soft-light .topbar,
body.tema-soft-light .modulo-card,
body.tema-soft-light .modal-contenido,
body.tema-soft-light .resumen-card,
body.tema-soft-light .tabla-scroll,
body.tema-foundation .login-card,
body.tema-foundation .topbar,
body.tema-foundation .modulo-card,
body.tema-foundation .modal-contenido,
body.tema-foundation .resumen-card,
body.tema-foundation .tabla-scroll,
body.tema-liquid-light .login-card,
body.tema-liquid-light .topbar,
body.tema-liquid-light .modulo-card,
body.tema-liquid-light .modal-contenido,
body.tema-liquid-light .resumen-card,
body.tema-liquid-light .tabla-scroll {
  background: linear-gradient(145deg, var(--glass), var(--glass-soft));
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48), inset 0 -1px 0 rgba(0,0,0,.05), 0 18px 45px rgba(66,45,24,.18), 0 0 24px color-mix(in srgb, var(--cyan) 24%, transparent);
}

body.tema-aegis .login-card input,
body.tema-aegis .input-modal,
body.tema-soft-light .login-card input,
body.tema-soft-light .input-modal,
body.tema-foundation .login-card input,
body.tema-foundation .input-modal,
body.tema-liquid-light .login-card input,
body.tema-liquid-light .input-modal {
  background: rgba(255,255,255,.72);
  color: var(--text);
}

body.tema-aegis .tabla-usuarios,
body.tema-soft-light .tabla-usuarios,
body.tema-foundation .tabla-usuarios,
body.tema-liquid-light .tabla-usuarios { background: rgba(255,255,255,.45); }
body.tema-aegis .tabla-usuarios th,
body.tema-soft-light .tabla-usuarios th,
body.tema-foundation .tabla-usuarios th,
body.tema-liquid-light .tabla-usuarios th { background: rgba(255,255,255,.86); color: var(--cyan); }
body.tema-aegis .tabla-usuarios td,
body.tema-soft-light .tabla-usuarios td,
body.tema-foundation .tabla-usuarios td,
body.tema-liquid-light .tabla-usuarios td { color: var(--text); border-bottom:1px solid rgba(0,0,0,.08); }
body.tema-aegis .user-info,
body.tema-soft-light .user-info,
body.tema-foundation .user-info,
body.tema-liquid-light .user-info { color: var(--text); }

/* Ajuste general para que todos los componentes usen los colores del tema */
.login-card,
.topbar,
.modulo-card,
.modal-contenido,
.resumen-card,
.tabla-scroll { border-color: var(--line); }
.login-card h1,
.welcome h1 { background: linear-gradient(90deg, var(--cyan), var(--purple), var(--green)); -webkit-background-clip:text; color:transparent; }
.login-card button,
.btn-top,
.modulo-card button,
.btn-modal,
.btn-cerrar-pro { background: linear-gradient(135deg, var(--cyan), var(--purple)); }
.icono-glass,
.logo-circle { background: linear-gradient(135deg, color-mix(in srgb, var(--cyan) 28%, transparent), color-mix(in srgb, var(--purple) 24%, transparent)); }

@media (max-width: 760px) {
  .topbar { flex-direction:column; align-items:stretch; }
  .topbar-right { flex-direction:column; align-items:stretch; }
  .theme-control { justify-content:space-between; }
  .theme-select { max-width:none; width:100%; }
  .user-info { text-align:left; }
}

/* PERFIL DEL PERSONAL */
.modal-perfil {
  width: 940px;
  max-width: 96%;
}

.perfil-selector-grid,
.perfil-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: end;
}

.btn-recargar-perfil {
  margin-bottom: 14px;
}

.label-campo {
  display: block;
  margin: 4px 0 8px;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

.perfil-datos-base {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  align-items: center;
  margin: 16px 0 20px;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 22px rgba(87,232,255,0.08);
}

.perfil-foto-box {
  width: 112px;
  height: 112px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
}

.perfil-foto {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 24px;
  border: 2px solid rgba(87,232,255,0.65);
  box-shadow: 0 0 24px rgba(87,232,255,0.22);
}

.perfil-info-base h3 {
  margin: 0 0 6px;
  font-size: 24px;
}

.perfil-info-base p {
  margin: 0 0 12px;
  color: var(--muted);
}

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

.textarea-modal {
  min-height: 86px;
  resize: vertical;
  font-family: inherit;
}

@media (max-width: 760px) {
  .perfil-selector-grid,
  .perfil-form-grid,
  .perfil-datos-base {
    grid-template-columns: 1fr;
  }

  .perfil-foto-box {
    margin: 0 auto;
  }
}

/* AGENDA TELEFÓNICA Y CORREOS */
.modal-agenda {
  max-width: 1180px;
  width: min(1180px, calc(100vw - 28px));
  max-height: calc(100vh - 34px);
  overflow-y: auto;
}

.agenda-toolbar,
.agenda-acciones-masivas {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
}

.agenda-acciones-masivas {
  grid-template-columns: repeat(3, minmax(170px, auto));
  justify-content: start;
}

.correo-masivo-box {
  margin: 18px 0;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 12px 30px rgba(0,0,0,0.18);
}

.btn-agenda-secundario {
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(87,232,255,0.18));
  color: var(--text);
}

.agenda-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 4px 0 12px;
}

.agenda-card {
  position: relative;
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,0.095), rgba(255,255,255,0.028));
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 15px 34px rgba(0,0,0,0.22), 0 0 18px rgba(87,232,255,0.08);
  overflow: hidden;
}

.agenda-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.11), transparent 32%, rgba(87,232,255,0.05));
}

.agenda-check-wrap {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}

.agenda-check {
  width: 20px;
  height: 20px;
  accent-color: var(--cyan);
  cursor: pointer;
}

.agenda-foto {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 0 18px rgba(87,232,255,0.14);
  position: relative;
  z-index: 1;
}

.agenda-foto-vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: rgba(255,255,255,0.08);
}

.agenda-info {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.agenda-info h3 {
  margin: 0 28px 6px 0;
  font-size: 18px;
}

.agenda-info p {
  margin: 7px 0;
  color: var(--muted);
  word-break: break-word;
}

.agenda-info a {
  color: var(--cyan);
  text-decoration: none;
}

.agenda-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

@media (max-width: 760px) {
  .agenda-toolbar,
  .agenda-acciones-masivas {
    grid-template-columns: 1fr;
  }

  .agenda-lista {
    grid-template-columns: 1fr;
  }
}

/* EMPRESAS - Software ESM */
.empresa-form-grid {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 18px;
  min-height: 0;
}

.empresa-form-card,
.empresa-lista-card,
.empresa-preview {
  background: var(--card, rgba(255,255,255,0.06));
  border: 1px solid var(--border, rgba(255,255,255,0.14));
  border-radius: 18px;
  padding: 16px;
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow, 0 20px 45px rgba(0,0,0,0.25));
}

.campo-label {
  display: block;
  margin: 10px 0 6px;
  color: var(--muted, rgba(255,255,255,0.72));
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}

.preview-logo-empresa {
  width: 110px;
  height: 110px;
  border-radius: 24px;
  object-fit: contain;
  padding: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
}

.empresas-lista {
  display: grid;
  gap: 12px;
  max-height: min(62vh, 620px);
  overflow-y: auto;
  padding: 4px 8px 4px 0;
}

.empresa-item-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px;
  border-radius: 16px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.12);
}

.empresa-item-card strong {
  color: var(--text, #fff);
  font-size: 15px;
}

.empresa-item-card p {
  margin: 3px 0 0;
  color: var(--muted, rgba(255,255,255,0.68));
  font-size: 12px;
}

.empresa-logo-mini {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  flex: 0 0 auto;
}

.empresa-logo-mini img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.empresa-logo-placeholder {
  font-size: 24px;
}

.empresa-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 14px;
  padding: 12px;
}

.empresa-preview img {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: contain;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 5px;
}

.empresa-preview strong {
  display: block;
  color: var(--text, #fff);
}

.empresa-preview span {
  color: var(--muted, rgba(255,255,255,0.66));
  font-size: 12px;
}

@media (max-width: 860px) {
  .empresa-form-grid {
    grid-template-columns: 1fr;
  }
}

/* MONITOREO DE TRASLADOS */
.modal-traslados {
  max-width: 1280px;
  width: min(1280px, calc(100vw - 28px));
  max-height: calc(100vh - 34px);
  overflow-y: auto;
}

.resumen-traslados {
  grid-template-columns: repeat(3, 1fr);
}

.traslados-grid-principal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 18px;
  align-items: start;
}

.traslado-panel-card {
  padding: 18px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,0.085), rgba(255,255,255,0.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 16px 36px rgba(0,0,0,0.22);
}

.traslado-toolbar {
  margin-top: 0;
}

.traslados-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 15px;
  max-height: calc(100vh - 330px);
  overflow: auto;
  padding: 4px 8px 12px 0;
}

.traslado-card {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.028));
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 15px 32px rgba(0,0,0,0.24), 0 0 18px rgba(87,232,255,0.08);
}

.traslado-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent 35%, rgba(87,232,255,0.05));
}

.traslado-activo {
  border-color: rgba(101,255,199,0.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 15px 32px rgba(0,0,0,0.24), 0 0 22px rgba(101,255,199,0.10);
}

.traslado-finalizado {
  opacity: 0.78;
}

.traslado-card-head,
.traslado-datos-grid,
.traslado-card-footer {
  position: relative;
  z-index: 1;
}

.traslado-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.traslado-card-head h3 {
  margin: 0 0 5px;
  font-size: 18px;
}

.traslado-card-head h3 span {
  color: var(--cyan);
  font-size: 13px;
  font-weight: 700;
}

.traslado-card-head p,
.traslado-datos-grid p {
  margin: 6px 0;
  color: var(--muted);
}

.traslado-datos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
}

.traslado-motivo {
  grid-column: 1 / -1;
}

.traslado-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}

.btn-mini-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(87,232,255,0.30);
  color: #b9f8ff;
  text-decoration: none;
  background: rgba(87,232,255,0.08);
  font-weight: 800;
  font-size: 12px;
}

.separador-glass {
  height: 1px;
  margin: 20px 0;
  background: linear-gradient(90deg, transparent, rgba(87,232,255,0.55), transparent);
}

.traslado-panel-card h3 {
  margin: 0 0 8px;
}

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

@media (max-width: 680px) {
  .resumen-traslados,
  .traslado-datos-grid,
  .traslados-lista {
    grid-template-columns: 1fr;
  }
}


/* Historial de gastos de traslados */
.historial-gastos-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 6px;
}

.gasto-historial-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.gasto-historial-card p {
  margin: 4px 0 0;
}

/* CONFIGURACIÓN DE MÓDULOS POR CARGO */
.config-modulos-layout {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 18px;
  align-items: start;
}

.config-modulos-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  padding: 18px;
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
}

.config-modulos-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  max-height: 58vh;
  overflow-y: auto;
  padding-right: 6px;
}

.modulo-check-card {
  display: grid;
  grid-template-columns: auto 42px 1fr;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.13);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.modulo-check-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 220, 255, 0.4);
  box-shadow: 0 0 22px rgba(0, 220, 255, 0.12);
}

.modulo-check-card input {
  width: 18px;
  height: 18px;
  accent-color: #00d4ff;
}

.modulo-check-icono {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 21px;
}

.modulo-check-card strong {
  display: block;
  color: var(--text, #fff);
  margin-bottom: 3px;
}

.modulo-check-card small {
  display: block;
  color: var(--muted, rgba(255, 255, 255, 0.68));
  line-height: 1.25;
}

@media (max-width: 900px) {
  .config-modulos-layout {
    grid-template-columns: 1fr;
  }
}

/* Personas por cargo en configuración de módulos */
.config-personas-card {
  min-height: 280px;
}

.config-personas-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.personas-cargo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 8px;
}

.persona-cargo-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
  min-width: 0;
}

.persona-cargo-card img,
.persona-cargo-foto-vacia {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--border-strong);
  box-shadow: 0 0 14px var(--glow);
}

.persona-cargo-foto-vacia {
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.08);
}

.persona-cargo-card strong {
  color: var(--text);
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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


/* FIX REAL: scroll en Configuración de módulos */
#modalConfigModulos.modal {
  align-items: flex-start;
  overflow-y: auto;
}

#modalConfigModulos .modal-contenido,
#modalConfigModulos .modal-contenido.modal-grande {
  max-height: calc(100vh - 34px);
  overflow-y: auto !important;
  overflow-x: hidden;
}

#modalConfigModulos .config-modulos-layout {
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  align-items: start;
  padding-bottom: 24px;
}

#modalConfigModulos .config-modulos-lista-card {
  grid-column: 1 / -1;
}

#modalConfigModulos #listaConfigModulos.config-modulos-lista {
  max-height: 420px;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding: 10px 12px 10px 10px;
  border-radius: 18px;
  background: rgba(255,255,255,0.035);
}

#modalConfigModulos #listaPersonasCargo.personas-cargo-grid {
  max-height: 280px;
  overflow-y: auto !important;
}

#modalConfigModulos #listaConfigModulos::-webkit-scrollbar,
#modalConfigModulos #listaPersonasCargo::-webkit-scrollbar {
  width: 10px;
}

#modalConfigModulos #listaConfigModulos::-webkit-scrollbar-thumb,
#modalConfigModulos #listaPersonasCargo::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(87,232,255,0.75), rgba(168,107,255,0.65));
  border-radius: 999px;
}

@media (max-width: 900px) {
  #modalConfigModulos .config-modulos-layout {
    grid-template-columns: 1fr;
  }
}

/* VISTA PREVIA POR ROL */
.vista-previa-rol {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 14px 0 18px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,0.065);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.22);
}
.vista-previa-rol strong { display: block; }
.vista-previa-rol span { display: block; font-size: 12px; opacity: .78; }
.vista-previa-rol select { min-width: 260px; max-width: 360px; }
@media (max-width: 760px) {
  .vista-previa-rol { flex-direction: column; align-items: stretch; }
  .vista-previa-rol select { max-width: 100%; min-width: 0; }
}

/* Scroll fuerte para configuración de módulos */
#modalConfigModulos .modal-contenido,
#modalConfigModulos .modal-contenido.modal-grande {
  max-height: calc(100vh - 24px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
#modalConfigModulos #listaConfigModulos.config-modulos-lista {
  max-height: 360px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px 12px 14px 10px !important;
}

/* ===== FONDOS ANIMADOS + HEADER PRO SOFTWARE ESM ===== */
.fondo-animado {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.72;
  background: radial-gradient(circle at 20% 20%, rgba(87,232,255,.22), transparent 32%), radial-gradient(circle at 80% 25%, rgba(168,107,255,.20), transparent 30%), linear-gradient(135deg, #030817, #07142a 55%, #02040a);
  overflow: hidden;
}
.fondo-animado::before,
.fondo-animado::after {
  content:"";
  position:absolute;
  inset:-20%;
  background-size: 240px 240px, 100% 100%;
  animation: esmFondoMover 18s linear infinite;
  opacity:.5;
}
.fondo-animado::before {
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
}
.fondo-animado::after {
  background: conic-gradient(from 90deg at 50% 50%, transparent, rgba(87,232,255,.16), transparent, rgba(168,107,255,.15), transparent);
  filter: blur(18px);
  animation: esmFondoGirar 26s linear infinite;
}
@keyframes esmFondoMover { from { transform: translate3d(0,0,0); } to { transform: translate3d(120px,120px,0); } }
@keyframes esmFondoGirar { from { transform: rotate(0deg) scale(1.05); } to { transform: rotate(360deg) scale(1.05); } }
body.fondo-1 .fondo-animado { background: radial-gradient(circle at 20% 18%, rgba(87,232,255,.24), transparent 32%), radial-gradient(circle at 80% 82%, rgba(92,141,255,.22), transparent 35%), linear-gradient(135deg,#030817,#081c3b 55%,#020712); }
body.fondo-2 .fondo-animado { background: radial-gradient(circle at 18% 20%, rgba(255,0,200,.25), transparent 28%), radial-gradient(circle at 80% 30%, rgba(0,255,255,.24), transparent 30%), linear-gradient(135deg,#080012,#06051f 55%,#01010a); }
body.fondo-3 .fondo-animado { background: radial-gradient(circle at 50% 10%, rgba(0,255,180,.18), transparent 28%), repeating-linear-gradient(90deg, rgba(87,232,255,.04) 0 1px, transparent 1px 80px), linear-gradient(135deg,#021016,#061b21,#020608); }
body.fondo-4 .fondo-animado { background: radial-gradient(circle at 30% 20%, rgba(0,255,190,.20), transparent 34%), radial-gradient(circle at 75% 65%, rgba(168,107,255,.26), transparent 32%), linear-gradient(135deg,#05091a,#061329,#010409); }
body.fondo-5 .fondo-animado { background: radial-gradient(circle at 15% 85%, rgba(101,255,199,.19), transparent 30%), radial-gradient(circle at 80% 18%, rgba(87,232,255,.19), transparent 33%), linear-gradient(135deg,#00120b,#051a15,#020605); }
body.fondo-6 .fondo-animado { background: radial-gradient(circle at 20% 20%, rgba(255,48,89,.24), transparent 29%), radial-gradient(circle at 80% 80%, rgba(255,150,80,.18), transparent 34%), linear-gradient(135deg,#120203,#1b0508,#030101); }
body.fondo-7 .fondo-animado { background: radial-gradient(circle at 30% 25%, rgba(73,255,226,.23), transparent 31%), radial-gradient(circle at 82% 70%, rgba(30,145,255,.22), transparent 35%), linear-gradient(135deg,#02111b,#032535,#01050a); }
body.fondo-8 .fondo-animado { background: radial-gradient(circle at 80% 20%, rgba(255,180,60,.17), transparent 28%), repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 70px), linear-gradient(135deg,#080a0c,#15181b,#030405); }
body.fondo-9 .fondo-animado { background: radial-gradient(circle at 20% 30%, rgba(168,107,255,.30), transparent 32%), radial-gradient(circle at 80% 70%, rgba(87,232,255,.17), transparent 30%), linear-gradient(135deg,#080012,#10052d,#02010a); }
body.fondo-10 .fondo-animado { background: radial-gradient(circle at 70% 20%, rgba(220,230,255,.16), transparent 32%), radial-gradient(circle at 22% 78%, rgba(87,232,255,.13), transparent 30%), linear-gradient(135deg,#020204,#101217,#000); }

.user-info-pro { display:flex; align-items:center; gap:12px; }
.foto-usuario-top {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(87,232,255,.55);
  box-shadow: 0 0 18px rgba(87,232,255,.22);
}
.welcome-pro { position: relative; overflow: hidden; }
.welcome-identidad { display:flex; align-items:center; gap:18px; }
.foto-usuario-welcome {
  width: clamp(64px, 7vw, 92px); height: clamp(64px, 7vw, 92px);
  border-radius: 24px; object-fit: cover;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 0 24px rgba(87,232,255,.22), inset 0 1px 0 rgba(255,255,255,.25);
}
.welcome-subnombre { margin: 4px 0 0; color: var(--muted); }
.btn-sonido {
  min-width: 44px; height: 42px; border-radius: 14px; border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06); color: var(--text); cursor:pointer;
  backdrop-filter: blur(14px); box-shadow: 0 0 18px rgba(87,232,255,.10);
}
.btn-sonido:hover { transform: translateY(-1px); box-shadow: 0 0 22px rgba(87,232,255,.22); }
@media (max-width: 900px) { .fondo-control { display:none; } .welcome-identidad { align-items:flex-start; } }

/* VER USUARIOS - TARJETAS PRO */
.usuarios-cards-scroll {
  max-height: 68vh;
  overflow-y: auto;
  padding: 10px 8px 18px;
}

.usuarios-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 16px;
}

.usuario-card-pro {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  color: var(--text);
}

.usuario-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.usuario-card-foto,
.usuario-card-foto-vacia {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.08);
  display: grid;
  place-items: center;
  font-size: 26px;
}

.usuario-card-nombre {
  flex: 1;
  min-width: 0;
}

.usuario-card-nombre h3 {
  margin: 0 0 4px;
  font-size: 1.02rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.usuario-card-nombre p {
  margin: 0;
  opacity: .72;
  font-size: .82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.usuario-card-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.usuario-card-info span {
  background: rgba(255,255,255,0.055);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 9px 10px;
  font-size: .84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usuario-card-info strong {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .58;
  margin-bottom: 3px;
}

.usuario-card-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-peligro {
  border-color: rgba(255,80,80,.45) !important;
  color: #ffb4b4 !important;
}

.estado-eliminado {
  background: rgba(255,80,80,.14);
  color: #ffb4b4;
  border-color: rgba(255,80,80,.35);
}

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


/* ICONOS PRO - 10 ESTILOS */
.iconos-control { min-width: 180px; }
.icono-pro-svg {
  position: relative;
  display: grid !important;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 22px;
  overflow: visible;
  isolation: isolate;
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease, background .25s ease;
}
.icono-pro-svg svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.35));
}
.modulo-card:hover .icono-pro-svg { transform: translateY(-3px) scale(1.04); }

body.iconos-lucide-pro .icono-pro-svg {
  color: #dbeafe;
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  border: 1px solid rgba(219,234,254,.28);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.20), 0 18px 38px rgba(15,23,42,.30);
}
body.iconos-neon-premium .icono-pro-svg {
  color: #67e8f9;
  background: radial-gradient(circle at 35% 20%, rgba(236,72,153,.38), transparent 34%), linear-gradient(145deg, rgba(56,189,248,.18), rgba(124,58,237,.16));
  border: 1px solid rgba(103,232,249,.48);
  box-shadow: 0 0 18px rgba(34,211,238,.42), 0 0 34px rgba(168,85,247,.26), inset 0 0 18px rgba(255,255,255,.08);
}
body.iconos-liquid-glass .icono-pro-svg {
  color: #f8fafc;
  background: linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.08) 45%, rgba(125,211,252,.15));
  border: 1px solid rgba(255,255,255,.48);
  box-shadow: inset 0 2px 10px rgba(255,255,255,.25), inset 0 -10px 18px rgba(15,23,42,.15), 0 16px 35px rgba(59,130,246,.22);
  backdrop-filter: blur(16px);
}
body.iconos-lineal-ejecutivo .icono-pro-svg {
  color: #93c5fd;
  background: rgba(15,23,42,.28);
  border: 1.4px solid rgba(147,197,253,.52);
  box-shadow: 0 12px 24px rgba(2,6,23,.24);
}
body.iconos-lineal-ejecutivo .icono-pro-svg svg { stroke-width: 1.55; }
body.iconos-hologram-blue .icono-pro-svg {
  color: #bffcff;
  background: conic-gradient(from 180deg, rgba(6,182,212,.30), rgba(59,130,246,.18), rgba(168,85,247,.26), rgba(6,182,212,.30));
  border: 1px solid rgba(191,252,255,.45);
  box-shadow: 0 0 22px rgba(34,211,238,.34), inset 0 0 24px rgba(255,255,255,.10);
}
body.iconos-titanium-dark .icono-pro-svg {
  color: #e5e7eb;
  background: linear-gradient(145deg, #111827, #374151 48%, #0f172a);
  border: 1px solid rgba(229,231,235,.22);
  box-shadow: inset 4px 4px 9px rgba(255,255,255,.08), inset -5px -6px 14px rgba(0,0,0,.46), 0 18px 35px rgba(0,0,0,.35);
}
body.iconos-aqua-security .icono-pro-svg {
  color: #5eead4;
  background: radial-gradient(circle at 50% 45%, rgba(20,184,166,.25), rgba(15,23,42,.22) 62%);
  border: 1px solid rgba(94,234,212,.55);
  box-shadow: 0 0 20px rgba(45,212,191,.34), inset 0 0 20px rgba(45,212,191,.10);
}
body.iconos-red-alert .icono-pro-svg {
  color: #fecaca;
  background: linear-gradient(145deg, rgba(127,29,29,.46), rgba(17,24,39,.28));
  border: 1px solid rgba(248,113,113,.55);
  box-shadow: 0 0 20px rgba(239,68,68,.38), 0 0 34px rgba(127,29,29,.25), inset 0 0 18px rgba(255,255,255,.06);
}
body.iconos-gold-elite .icono-pro-svg {
  color: #fff7d6;
  background: linear-gradient(145deg, rgba(250,204,21,.32), rgba(120,53,15,.22), rgba(255,255,255,.08));
  border: 1px solid rgba(253,224,71,.58);
  box-shadow: 0 0 18px rgba(250,204,21,.30), inset 0 1px 10px rgba(255,255,255,.18);
}
body.iconos-black-chrome .icono-pro-svg {
  color: #e0f2fe;
  background: linear-gradient(145deg, #020617, #111827 45%, #000 75%);
  border: 1px solid rgba(148,163,184,.34);
  box-shadow: inset 0 1px 3px rgba(255,255,255,.18), inset 0 -14px 20px rgba(56,189,248,.08), 0 20px 36px rgba(0,0,0,.50);
}
body.iconos-black-chrome .icono-pro-svg::after,
body.iconos-liquid-glass .icono-pro-svg::after {
  content: "";
  position: absolute;
  inset: 8px 10px auto 10px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.38), transparent);
  z-index: 1;
  pointer-events: none;
}

/* LOGO DEL SISTEMA PERSONALIZABLE */
.logo-sistema-wrap {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-sistema-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.logo-sistema-wrap.tiene-logo #logoSistemaTexto {
  display: none;
}

.logo-actions {
  margin-top: 6px;
}

.btn-logo-sistema {
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.btn-logo-sistema:hover {
  transform: translateY(-1px);
  border-color: rgba(87,232,255,0.5);
  box-shadow: 0 0 18px rgba(87,232,255,0.18);
}

/* GAFETES QR DOBLE CARA - SOFTWARE ESM */
.modal-gafetes {
  max-height: 92vh;
  overflow-y: auto;
}

.gafete-panel-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 22px;
  align-items: start;
}

.gafete-control-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 10px;
}

.gafetes-preview-wrap {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  padding: 8px;
}

.gafete-card {
  width: 320px;
  height: 505px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  background: #fff;
  color: #061b33;
  box-shadow: 0 22px 40px rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .55);
  isolation: isolate;
}

.gafete-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.35), transparent 18%),
    linear-gradient(135deg, rgba(0, 78, 128, .08), transparent 42%);
  pointer-events: none;
  z-index: 1;
}

.gafete-frente-fondo-texto {
  position: absolute;
  left: 16px;
  top: 66px;
  font-size: 38px;
  line-height: 1.2;
  letter-spacing: 5px;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(6, 27, 51, .34);
  transform: rotate(0deg);
  max-width: 170px;
  z-index: 0;
  opacity: .9;
}

.gafete-frente-titulo {
  position: absolute;
  top: 20px;
  left: 18px;
  font-size: 30px;
  letter-spacing: 7px;
  font-weight: 950;
  font-family: Georgia, 'Times New Roman', serif;
  color: #05070d;
  z-index: 4;
}

.gafete-foto-marco {
  position: absolute;
  left: 22px;
  top: 80px;
  width: 185px;
  height: 275px;
  border-radius: 4px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.gafete-foto-marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: none;
}

#gafeteFotoPlaceholder {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e6edf7, #c8d6e6);
  color: #0b2f4b;
  font-weight: 800;
}

.gafete-diagonal {
  position: absolute;
  right: -8px;
  top: 0;
  width: 134px;
  height: 370px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 8px, transparent 8px 16px),
    linear-gradient(160deg, #073b61 0%, #061b33 72%);
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 88%);
  z-index: 2;
}

.gafete-diagonal::after {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 16px;
  width: 130px;
  height: 8px;
  background: #f2d35b;
  transform: rotate(-17deg);
  box-shadow: 0 0 10px rgba(242,211,91,.55);
}

.gafete-logo-empresa-wrap {
  position: absolute;
  top: 18px;
  right: 25px;
  width: 92px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  border: 4px solid #f2d35b;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  color: #061b33;
  font-weight: 900;
  font-size: 10px;
  text-align: center;
}

.gafete-logo-empresa-wrap img,
.gafete-back-logo-empresa img,
.gafete-back-logo-esm img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: none;
}

.gafete-barra-azul {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 48px;
  min-height: 92px;
  background: linear-gradient(145deg, #061b33, #06385d);
  z-index: 4;
  padding: 16px 18px 12px 18px;
  color: #fff;
  border-top: 6px solid #f2d35b;
  transform: skewY(-8deg);
  transform-origin: left top;
}

.gafete-barra-azul h3,
.gafete-barra-azul p {
  transform: skewY(8deg);
}

.gafete-barra-azul h3 {
  font-size: 26px;
  margin: 0 0 4px;
  font-family: Georgia, 'Times New Roman', serif;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.gafete-barra-azul p {
  margin: 0;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}

.gafete-datos-frente {
  position: absolute;
  right: 13px;
  top: 100px;
  width: 86px;
  z-index: 5;
  color: #fff;
  display: grid;
  gap: 8px;
  font-size: 10px;
  text-align: right;
}

.gafete-datos-frente span {
  display: block;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(255,255,255,.55);
}

.gafete-datos-frente strong {
  display: block;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 8px;
  opacity: .8;
}

.gafete-datos-frente em {
  font-style: normal;
  font-weight: 800;
  word-break: break-word;
}

.gafete-atras {
  background: linear-gradient(160deg, #ffffff 0%, #ffffff 48%, #061b33 49%, #06385d 100%);
}

.gafete-atras::after {
  content: "";
  position: absolute;
  left: -80px;
  top: -85px;
  width: 430px;
  height: 190px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 8px, transparent 8px 16px),
    linear-gradient(160deg, #073b61, #061b33);
  transform: rotate(-12deg);
  z-index: 1;
}

.gafete-back-header {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  height: 46px;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gafete-back-logo-empresa,
.gafete-back-logo-esm {
  width: 84px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  border: 3px solid #f2d35b;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 900;
  color: #061b33;
  text-align: center;
}

.gafete-back-logo-esm {
  border-color: rgba(255,255,255,.75);
}

#gafeteBackTitulo {
  position: absolute;
  top: 72px;
  left: 28px;
  right: 28px;
  text-align: center;
  z-index: 4;
  color: #fff;
  letter-spacing: 3px;
  font-size: 17px;
  transform: rotate(-8deg);
}

.qr-marco {
  position: absolute;
  top: 128px;
  left: 44px;
  width: 232px;
  height: 232px;
  border-radius: 18px;
  border: 8px solid #0b5c95;
  background: #fff;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.24);
}

#gafeteQrCanvas {
  width: 214px !important;
  height: 214px !important;
}

.gafete-back-info {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 62px;
  z-index: 6;
  color: #fff;
  text-align: center;
}

.gafete-back-info strong {
  display: block;
  font-size: 22px;
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: 1px;
}

.gafete-back-info span {
  display: block;
  margin-top: 4px;
  font-weight: 700;
}

.hecho-softwareesm {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 15px;
  z-index: 6;
  color: rgba(255,255,255,.92);
  text-align: center;
  font-size: 11px;
  letter-spacing: 1px;
  margin: 0;
}

.gafete-back-diagonal {
  position: absolute;
  right: 28px;
  top: 125px;
  width: 24px;
  height: 118px;
  z-index: 6;
  background: repeating-linear-gradient(135deg, #061b33 0 6px, transparent 6px 12px);
}

@media (max-width: 980px) {
  .gafete-panel-layout { grid-template-columns: 1fr; }
  .gafete-control-card { position: relative; }
}

/* === GAFETE PRO SOFTWARE ESM - VALIDACIÓN, GLOW DINÁMICO Y MULTIESTILO === */
.gafete-control-card .separador-glass {
  margin: 16px 0;
}

.gafete-card {
  width: 340px;
  height: 520px;
  border-radius: 24px;
  background: #06131b;
  color: #eefcff;
  border: 1px solid rgba(146, 255, 228, .35);
  box-shadow:
    0 26px 70px rgba(0,0,0,.52),
    0 0 34px rgba(var(--gafete-rgb, 72, 255, 210), .24),
    inset 0 0 0 1px rgba(255,255,255,.08);
  overflow: hidden;
}

.gafete-card::before {
  z-index: 0;
  background:
    radial-gradient(circle at 78% 22%, rgba(var(--gafete-rgb, 72, 255, 210), .32), transparent 26%),
    radial-gradient(circle at 12% 86%, rgba(255,255,255,.10), transparent 26%),
    repeating-radial-gradient(ellipse at 70% 35%, rgba(var(--gafete-rgb,72,255,210),.24) 0 1.5px, transparent 2.5px 8px),
    linear-gradient(135deg, rgba(255,255,255,.10), transparent 25%, rgba(255,255,255,.04) 58%, transparent 70%);
  animation: gafeteGlowMove 8s ease-in-out infinite alternate;
}

.gafete-card::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 26px;
  padding: 2px;
  background: linear-gradient(120deg,
    rgba(var(--gafete-rgb,72,255,210), .85),
    transparent 28%,
    rgba(255,255,255,.45),
    transparent 64%,
    rgba(var(--gafete-rgb,72,255,210), .8)
  );
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
  z-index: 20;
  animation: gafeteBordeVivo 5.5s linear infinite;
}

.gafete-verde-neon { --gafete-rgb: 72, 255, 210; --gafete-main: #48ffd2; --gafete-second: #1fb983; --gafete-dark: #06131b; }
.gafete-azul-corporativo { --gafete-rgb: 65, 173, 255; --gafete-main: #41adff; --gafete-second: #1b64ff; --gafete-dark: #061226; }
.gafete-morado-premium { --gafete-rgb: 191, 94, 255; --gafete-main: #bf5eff; --gafete-second: #6d5cff; --gafete-dark: #13091f; }
.gafete-dorado-ejecutivo { --gafete-rgb: 255, 205, 95; --gafete-main: #ffcd5f; --gafete-second: #b77b2d; --gafete-dark: #191307; }
.gafete-rojo-seguridad { --gafete-rgb: 255, 76, 91; --gafete-main: #ff4c5b; --gafete-second: #b70c1d; --gafete-dark: #18080b; }
.gafete-negro-carbono { --gafete-rgb: 130, 170, 190; --gafete-main: #8fb4c8; --gafete-second: #263642; --gafete-dark: #050708; }
.gafete-aqua-tech { --gafete-rgb: 0, 230, 255; --gafete-main: #00e6ff; --gafete-second: #0089ff; --gafete-dark: #02131f; }
.gafete-naranja-energy { --gafete-rgb: 255, 142, 55; --gafete-main: #ff8e37; --gafete-second: #ff4f1f; --gafete-dark: #1b0903; }
.gafete-plateado-metal { --gafete-rgb: 210, 230, 245; --gafete-main: #d2e6f5; --gafete-second: #8795a2; --gafete-dark: #081018; }
.gafete-azul-royal { --gafete-rgb: 51, 104, 255; --gafete-main: #3368ff; --gafete-second: #00c2ff; --gafete-dark: #050b26; }
.gafete-rosa-neon { --gafete-rgb: 255, 64, 210; --gafete-main: #ff40d2; --gafete-second: #ff2d75; --gafete-dark: #1a0615; }
.gafete-midnight-blue { --gafete-rgb: 75, 116, 255; --gafete-main: #4b74ff; --gafete-second: #122a7a; --gafete-dark: #02081f; }
.gafete-emerald-security { --gafete-rgb: 22, 220, 128; --gafete-main: #16dc80; --gafete-second: #00a35b; --gafete-dark: #03150d; }
.gafete-titan-gray { --gafete-rgb: 150, 160, 175; --gafete-main: #96a0af; --gafete-second: #4b5563; --gafete-dark: #07090d; }
.gafete-blanco-premium { --gafete-rgb: 255, 255, 255; --gafete-main: #ffffff; --gafete-second: #a8d8ff; --gafete-dark: #0b1320; }

.gafete-frente {
  background:
    linear-gradient(145deg, rgba(255,255,255,.04), transparent 34%),
    radial-gradient(circle at 78% 28%, rgba(var(--gafete-rgb), .16), transparent 28%),
    linear-gradient(135deg, var(--gafete-dark), #071e25 68%, #020609);
}

.gafete-frente-fondo-texto {
  left: 20px;
  top: 26px;
  max-width: 315px;
  font-size: 36px;
  letter-spacing: 4px;
  color: rgba(255,255,255,.07);
  -webkit-text-stroke: 0;
  opacity: 1;
  z-index: 1;
}

.gafete-frente-titulo {
  top: 22px;
  left: 22px;
  font-size: 20px;
  letter-spacing: 2px;
  color: #ffffff;
  font-family: Inter, Arial, sans-serif;
  text-shadow: 0 0 18px rgba(var(--gafete-rgb), .45);
}

.gafete-logo-empresa-wrap {
  top: 20px;
  right: 20px;
  width: 86px;
  height: 42px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(var(--gafete-rgb), .45);
  box-shadow: inset 0 0 18px rgba(255,255,255,.08), 0 0 20px rgba(var(--gafete-rgb), .24);
  color: #fff;
  backdrop-filter: blur(14px);
}

.gafete-foto-marco {
  left: auto;
  right: 24px;
  top: 84px;
  width: 154px;
  height: 184px;
  border-radius: 24px;
  border: 1px solid rgba(var(--gafete-rgb), .70);
  box-shadow:
    0 0 0 5px rgba(var(--gafete-rgb), .09),
    0 0 35px rgba(var(--gafete-rgb), .40),
    inset 0 0 22px rgba(255,255,255,.08);
  animation: gafeteFotoPulse 3.8s ease-in-out infinite;
}

.gafete-foto-marco img,
#gafeteFotoPlaceholder {
  border-radius: 21px;
}

#gafeteFotoPlaceholder {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.8);
}

.gafete-diagonal {
  right: auto;
  left: 20px;
  top: 88px;
  width: 136px;
  height: 210px;
  clip-path: none;
  background:
    linear-gradient(90deg, rgba(var(--gafete-rgb), .26), transparent),
    repeating-linear-gradient(0deg, rgba(var(--gafete-rgb), .36) 0 2px, transparent 2px 12px);
  border-radius: 20px;
  opacity: .65;
  filter: blur(.1px);
}

.gafete-diagonal::after {
  display: none;
}

.gafete-barra-azul {
  left: 22px;
  right: 22px;
  bottom: 82px;
  min-height: 96px;
  border-radius: 22px;
  border-top: 0;
  transform: none;
  background:
    linear-gradient(135deg, rgba(var(--gafete-rgb), .28), rgba(255,255,255,.05)),
    rgba(2, 8, 14, .56);
  border: 1px solid rgba(var(--gafete-rgb), .35);
  box-shadow: 0 18px 35px rgba(0,0,0,.30), inset 0 0 20px rgba(255,255,255,.06);
  backdrop-filter: blur(16px);
}

.gafete-barra-azul h3,
.gafete-barra-azul p {
  transform: none;
  font-family: Inter, Arial, sans-serif;
}

.gafete-barra-azul h3 {
  font-size: 28px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 15px rgba(var(--gafete-rgb), .45);
}

.gafete-barra-azul p {
  color: rgba(255,255,255,.88);
}

.gafete-datos-frente {
  left: 22px;
  right: 22px;
  top: auto;
  bottom: 22px;
  width: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  text-align: left;
}

.gafete-datos-frente span {
  border: 1px solid rgba(var(--gafete-rgb), .25);
  border-radius: 14px;
  padding: 8px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}

.gafete-datos-frente strong { color: rgba(var(--gafete-rgb), .95); }
.gafete-datos-frente em { color: #fff; font-size: 10px; }

.gafete-atras {
  background:
    radial-gradient(circle at 50% 38%, rgba(var(--gafete-rgb), .18), transparent 36%),
    linear-gradient(145deg, var(--gafete-dark), #06131b 60%, #020609);
}

.gafete-atras::after {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
  z-index: 0;
  background:
    repeating-radial-gradient(ellipse at 50% 38%, rgba(var(--gafete-rgb), .20) 0 1.4px, transparent 2.8px 10px),
    linear-gradient(145deg, transparent, rgba(255,255,255,.04));
  opacity: .8;
}

.gafete-back-header { height: 52px; }
.gafete-back-logo-empresa,
.gafete-back-logo-esm {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(var(--gafete-rgb), .48);
  color: #fff;
  backdrop-filter: blur(14px);
  box-shadow: 0 0 20px rgba(var(--gafete-rgb), .22), inset 0 0 18px rgba(255,255,255,.06);
}

#gafeteBackTitulo {
  top: 82px;
  transform: none;
  color: #fff;
  text-shadow: 0 0 18px rgba(var(--gafete-rgb), .65);
}

.qr-marco {
  top: 132px;
  left: 44px;
  width: 250px;
  height: 250px;
  border-radius: 26px;
  border: 1px solid rgba(var(--gafete-rgb), .65);
  box-shadow:
    0 0 0 7px rgba(var(--gafete-rgb), .08),
    0 0 38px rgba(var(--gafete-rgb), .32),
    inset 0 0 18px rgba(0,0,0,.12);
  animation: gafeteFotoPulse 4.2s ease-in-out infinite;
}

#gafeteQrCanvas {
  width: 230px !important;
  height: 230px !important;
}

.gafete-back-info { bottom: 62px; }
.gafete-back-info strong { font-family: Inter, Arial, sans-serif; }
.hecho-softwareesm { color: rgba(255,255,255,.9); }
.gafete-back-diagonal { display: none; }

@keyframes gafeteGlowMove {
  0% { opacity: .65; transform: translate3d(-4px, -3px, 0) scale(1); }
  100% { opacity: 1; transform: translate3d(5px, 5px, 0) scale(1.03); }
}

@keyframes gafeteBordeVivo {
  0% { filter: hue-rotate(0deg) brightness(1); }
  100% { filter: hue-rotate(24deg) brightness(1.2); }
}

@keyframes gafeteFotoPulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(var(--gafete-rgb), .08), 0 0 24px rgba(var(--gafete-rgb), .32), inset 0 0 22px rgba(255,255,255,.08); }
  50% { box-shadow: 0 0 0 8px rgba(var(--gafete-rgb), .14), 0 0 48px rgba(var(--gafete-rgb), .56), inset 0 0 28px rgba(255,255,255,.12); }
}

@media print {
  .gafete-card::before,
  .gafete-card::after,
  .gafete-foto-marco,
  .qr-marco {
    animation: none !important;
  }
}

/* INVENTARIO Y CONTROL DE EQUIPOS PRO */
.modal-inventario,
.modal-control-equipos {
  max-height: 92vh;
  overflow-y: auto;
}

.inventario-toolbar,
.control-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.inventario-table-scroll,
.control-table-scroll {
  max-height: 440px;
  overflow: auto;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
}

.tabla-equipos-pro {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
  color: var(--text, #fff);
}

.tabla-equipos-pro thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(4, 12, 26, 0.92);
  color: var(--primary, #66f7d2);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 12px;
}

.tabla-equipos-pro th,
.tabla-equipos-pro td {
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  vertical-align: middle;
}

.input-tabla {
  width: 100%;
  min-width: 90px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  color: var(--text, #fff);
  outline: none;
}

.control-header-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  align-items: stretch;
}

.control-logo-card {
  min-height: 150px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(circle at top, rgba(102,247,210,.18), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 30px rgba(102,247,210,.10);
}

.control-logo-card img {
  max-width: 120px;
  max-height: 120px;
  object-fit: contain;
}

#controlLogoPlaceholder {
  width: 100px;
  height: 100px;
  border-radius: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(255,255,255,.28);
  color: var(--primary, #66f7d2);
  font-weight: 800;
  letter-spacing: .08em;
}

.control-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}

.control-meta-line span,
.alerta-equipos,
.historial-control-card {
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}

.control-meta-line em {
  color: var(--primary, #66f7d2);
  font-style: normal;
}

.alerta-equipos {
  margin: 12px 0;
  background: rgba(255, 88, 88, 0.15);
  border-color: rgba(255, 88, 88, 0.35);
  color: #ffd4d4;
  font-weight: 800;
  box-shadow: 0 0 24px rgba(255, 88, 88, 0.16);
}

.control-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0;
}

.historial-control-lista {
  max-height: 320px;
  overflow-y: auto;
  display: grid;
  gap: 10px;
}

.historial-control-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.historial-control-card strong {
  color: var(--primary, #66f7d2);
}

@media (max-width: 760px) {
  .control-header-grid {
    grid-template-columns: 1fr;
  }
  .tabla-equipos-pro {
    min-width: 900px;
  }
}


/* CHAT EMPRESARIAL PRO */
.modal-chat-empresa {
  width: min(1180px, 96vw);
  max-height: 92vh;
  overflow: hidden;
}

.chat-layout-pro {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 18px;
  min-height: 620px;
}

.chat-sidebar-pro,
.chat-panel-pro {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 22px 60px rgba(0,0,0,.25);
  backdrop-filter: blur(18px);
}

.chat-sidebar-pro {
  display: grid;
  gap: 10px;
  align-content: start;
}

.chat-mini-info {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(82,255,202,.10), rgba(65,128,255,.08));
  border: 1px solid rgba(102,247,210,.18);
}

.chat-mini-info strong { color: var(--primary, #66f7d2); }
.chat-mini-info span { color: var(--muted, #b8c7d9); font-size: 13px; }

.chat-panel-pro {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 12px;
  min-width: 0;
}

.chat-top-pro {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.chat-avatar-canal {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  letter-spacing: .08em;
  color: #061113;
  background: linear-gradient(135deg, var(--primary, #66f7d2), #5c8dff);
  box-shadow: 0 0 26px rgba(102,247,210,.28);
}

.chat-mensajes-pro {
  min-height: 330px;
  max-height: 430px;
  overflow-y: auto;
  padding: 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(102,247,210,.08), transparent 35%),
    radial-gradient(circle at bottom right, rgba(92,141,255,.10), transparent 38%),
    rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
}

.chat-msg {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 12px 0;
}

.chat-msg.chat-propio {
  flex-direction: row-reverse;
}

.chat-msg-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 38px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  display: grid;
  place-items: center;
  color: var(--primary, #66f7d2);
  font-weight: 900;
}

.chat-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-burbuja {
  max-width: min(620px, 78%);
  padding: 12px 14px;
  border-radius: 20px 20px 20px 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 12px 28px rgba(0,0,0,.20);
}

.chat-propio .chat-burbuja {
  border-radius: 20px 20px 8px 20px;
  background: linear-gradient(135deg, rgba(102,247,210,.18), rgba(92,141,255,.14));
  border-color: rgba(102,247,210,.24);
}

.chat-msg-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px;
}

.chat-msg-head strong { color: var(--primary, #66f7d2); }
.chat-msg-head small { color: var(--muted, #b8c7d9); font-size: 11px; white-space: nowrap; }
.chat-burbuja p { margin: 0; line-height: 1.45; }

.chat-media {
  display: block;
  max-width: 260px;
  max-height: 260px;
  object-fit: cover;
  border-radius: 16px;
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.14);
}

.chat-formato-pro,
.chat-composer-pro {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.chat-formato-pro .input-modal { width: auto; min-width: 130px; }
.color-chat { min-width: 64px !important; width: 64px !important; height: 42px; padding: 4px !important; }
.btn-mini-glass.activo { outline: 2px solid var(--primary, #66f7d2); box-shadow: 0 0 18px rgba(102,247,210,.25); }
.chat-adjuntar { cursor: pointer; white-space: nowrap; }
.chat-composer-pro textarea { flex: 1 1 280px; min-height: 48px; max-height: 110px; }
.chat-composer-pro #chatGifUrl { flex: 0 1 230px; }

@media (max-width: 900px) {
  .chat-layout-pro { grid-template-columns: 1fr; }
  .chat-mensajes-pro { max-height: 360px; }
  .chat-burbuja { max-width: 86%; }
}

/* =========================================================
   CHAT EMPRESARIAL PRO - TEMAS, FONDOS Y PERSONALIZACIÓN
   ========================================================= */
.chat-personalizador-pro {
  margin-top: 16px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 18px rgba(255,255,255,0.025), 0 12px 30px rgba(0,0,0,0.16);
  backdrop-filter: blur(14px);
}

.chat-personalizador-head {
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
}

.chat-personalizador-head strong {
  color: var(--primary, #66f7d2);
  letter-spacing: 0.3px;
}

.chat-personalizador-head small,
.chat-toggle-line span {
  color: var(--muted, #b8c7d9);
  font-size: 12px;
}

.chat-toggle-line {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

#modalChatEmpresa.chat-tema-whatsapp {
  --chat-accent: #22c55e;
  --chat-accent-2: #0ea5e9;
  --chat-own: linear-gradient(135deg, rgba(34,197,94,0.95), rgba(13,148,136,0.88));
  --chat-other: rgba(18, 32, 45, 0.88);
  --chat-text-own: #06140d;
}

#modalChatEmpresa.chat-tema-neon {
  --chat-accent: #00f5ff;
  --chat-accent-2: #ff39f8;
  --chat-own: linear-gradient(135deg, rgba(0,245,255,0.92), rgba(150,70,255,0.88));
  --chat-other: rgba(18, 15, 36, 0.9);
  --chat-text-own: #051018;
}

#modalChatEmpresa.chat-tema-glass {
  --chat-accent: #99f6e4;
  --chat-accent-2: #60a5fa;
  --chat-own: linear-gradient(135deg, rgba(153,246,228,0.75), rgba(96,165,250,0.62));
  --chat-other: rgba(255, 255, 255, 0.075);
  --chat-text-own: #06131b;
}

#modalChatEmpresa.chat-tema-ejecutivo {
  --chat-accent: #d4d4d8;
  --chat-accent-2: #94a3b8;
  --chat-own: linear-gradient(135deg, rgba(226,232,240,0.92), rgba(148,163,184,0.82));
  --chat-other: rgba(20, 25, 34, 0.92);
  --chat-text-own: #111827;
}

#modalChatEmpresa.chat-tema-azul {
  --chat-accent: #38bdf8;
  --chat-accent-2: #2563eb;
  --chat-own: linear-gradient(135deg, rgba(56,189,248,0.95), rgba(37,99,235,0.86));
  --chat-other: rgba(9, 24, 45, 0.92);
  --chat-text-own: #eff6ff;
}

#modalChatEmpresa.chat-tema-morado {
  --chat-accent: #c084fc;
  --chat-accent-2: #7c3aed;
  --chat-own: linear-gradient(135deg, rgba(192,132,252,0.95), rgba(124,58,237,0.86));
  --chat-other: rgba(31, 20, 51, 0.92);
  --chat-text-own: #fff;
}

#modalChatEmpresa.chat-tema-dorado {
  --chat-accent: #facc15;
  --chat-accent-2: #b45309;
  --chat-own: linear-gradient(135deg, rgba(250,204,21,0.96), rgba(180,83,9,0.86));
  --chat-other: rgba(35, 25, 12, 0.92);
  --chat-text-own: #1c1205;
}

#modalChatEmpresa.chat-tema-tactico {
  --chat-accent: #a3e635;
  --chat-accent-2: #22c55e;
  --chat-own: linear-gradient(135deg, rgba(132,204,22,0.94), rgba(34,197,94,0.84));
  --chat-other: rgba(20, 31, 20, 0.92);
  --chat-text-own: #06120a;
}

#modalChatEmpresa.chat-tema-claro {
  --chat-accent: #2563eb;
  --chat-accent-2: #14b8a6;
  --chat-own: linear-gradient(135deg, rgba(37,99,235,0.92), rgba(20,184,166,0.86));
  --chat-other: rgba(255, 255, 255, 0.9);
  --chat-text-own: #ffffff;
}

#modalChatEmpresa.chat-tema-carbono {
  --chat-accent: #f97316;
  --chat-accent-2: #22d3ee;
  --chat-own: linear-gradient(135deg, rgba(249,115,22,0.96), rgba(34,211,238,0.72));
  --chat-other: rgba(18, 18, 20, 0.95);
  --chat-text-own: #111827;
}

#modalChatEmpresa .chat-panel-pro {
  position: relative;
  overflow: hidden;
}

#modalChatEmpresa .chat-panel-pro::before {
  content: "";
  position: absolute;
  inset: 74px 12px 124px 12px;
  border-radius: 22px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

#modalChatEmpresa .chat-top-pro,
#modalChatEmpresa .chat-mensajes-pro,
#modalChatEmpresa .chat-formato-pro,
#modalChatEmpresa .chat-composer-pro {
  position: relative;
  z-index: 1;
}

#modalChatEmpresa.chat-fondo-patron .chat-panel-pro::before {
  background:
    radial-gradient(circle at 18px 18px, rgba(255,255,255,0.09) 1px, transparent 2px),
    radial-gradient(circle at 42px 42px, rgba(255,255,255,0.06) 1px, transparent 2px),
    linear-gradient(135deg, rgba(4,18,27,0.65), rgba(7,30,23,0.5));
  background-size: 58px 58px, 58px 58px, auto;
}

#modalChatEmpresa.chat-fondo-grid .chat-panel-pro::before {
  background:
    linear-gradient(rgba(56,189,248,0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,0.13) 1px, transparent 1px),
    radial-gradient(circle at 70% 20%, rgba(34,211,238,0.22), transparent 38%);
  background-size: 34px 34px, 34px 34px, auto;
}

#modalChatEmpresa.chat-fondo-neon .chat-panel-pro::before {
  background:
    radial-gradient(circle at 18% 28%, rgba(0,245,255,0.33), transparent 36%),
    radial-gradient(circle at 83% 68%, rgba(255,57,248,0.24), transparent 38%),
    linear-gradient(120deg, rgba(3,7,18,0.72), rgba(20,9,36,0.62));
}

#modalChatEmpresa.chat-fondo-glass .chat-panel-pro::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.025)),
    radial-gradient(circle at 50% 0%, rgba(153,246,228,0.16), transparent 48%);
  backdrop-filter: blur(12px);
}

#modalChatEmpresa.chat-fondo-tactico .chat-panel-pro::before {
  background:
    repeating-linear-gradient(135deg, rgba(163,230,53,0.08) 0 8px, transparent 8px 18px),
    linear-gradient(120deg, rgba(6,14,8,0.82), rgba(20,29,18,0.62));
}

#modalChatEmpresa.chat-fondo-empresa .chat-panel-pro::before {
  background:
    linear-gradient(145deg, rgba(15,23,42,0.82), rgba(30,41,59,0.55)),
    radial-gradient(circle at 20% 90%, rgba(14,165,233,0.20), transparent 45%);
}

#modalChatEmpresa.chat-fondo-radial .chat-panel-pro::before {
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.11), transparent 10%),
    radial-gradient(circle at center, rgba(56,189,248,0.14), transparent 38%),
    linear-gradient(135deg, rgba(2,6,23,0.78), rgba(15,23,42,0.58));
}

#modalChatEmpresa.chat-fondo-carbono .chat-panel-pro::before {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.055) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 8px),
    rgba(5,5,7,0.72);
}

#modalChatEmpresa.chat-fondo-limpio .chat-panel-pro::before {
  background: linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
}

#modalChatEmpresa.chat-fondo-hud .chat-panel-pro::before {
  background:
    linear-gradient(90deg, transparent 0 47%, rgba(34,211,238,0.16) 48% 52%, transparent 53% 100%),
    linear-gradient(0deg, transparent 0 47%, rgba(34,211,238,0.12) 48% 52%, transparent 53% 100%),
    radial-gradient(circle at 50% 50%, rgba(34,211,238,0.17), transparent 45%);
}

#modalChatEmpresa .chat-avatar-canal {
  background: linear-gradient(135deg, var(--chat-accent, var(--primary)), var(--chat-accent-2, #0ea5e9));
  box-shadow: 0 0 22px color-mix(in srgb, var(--chat-accent, #66f7d2) 48%, transparent);
}

#modalChatEmpresa .chat-propio .chat-burbuja {
  background: var(--chat-own, linear-gradient(135deg, rgba(34,197,94,0.95), rgba(13,148,136,0.88)));
  color: var(--chat-text-own, #06140d);
  border-color: color-mix(in srgb, var(--chat-accent, #22c55e) 55%, rgba(255,255,255,0.1));
}

#modalChatEmpresa .chat-otro .chat-burbuja {
  background: var(--chat-other, rgba(18, 32, 45, 0.88));
  border-color: color-mix(in srgb, var(--chat-accent-2, #0ea5e9) 35%, rgba(255,255,255,0.08));
}

#modalChatEmpresa.chat-burbuja-redonda .chat-burbuja { border-radius: 20px 20px 20px 8px; }
#modalChatEmpresa.chat-burbuja-redonda .chat-propio .chat-burbuja { border-radius: 20px 20px 8px 20px; }

#modalChatEmpresa.chat-burbuja-glass .chat-burbuja {
  border-radius: 22px;
  backdrop-filter: blur(18px);
  box-shadow: inset 0 0 16px rgba(255,255,255,0.05), 0 12px 28px rgba(0,0,0,0.22);
}

#modalChatEmpresa.chat-burbuja-neon .chat-burbuja {
  border-radius: 18px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--chat-accent, #22c55e) 30%, transparent), 0 0 24px color-mix(in srgb, var(--chat-accent, #22c55e) 18%, transparent);
}

#modalChatEmpresa.chat-burbuja-ejecutiva .chat-burbuja {
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.20);
}

#modalChatEmpresa .chat-formato-pro .btn-mini-glass.activo {
  border-color: var(--chat-accent, var(--primary));
  color: var(--chat-accent, var(--primary));
  box-shadow: 0 0 18px color-mix(in srgb, var(--chat-accent, #66f7d2) 35%, transparent);
}

/* =========================================================
   FIX CHAT TIPO WHATSAPP WEB - PANTALLA COMPLETA
   ========================================================= */
#modalChatEmpresa.modal {
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  overflow: hidden !important;
  background: rgba(3, 8, 18, 0.92) !important;
}

#modalChatEmpresa .modal-chat-empresa,
#modalChatEmpresa .modal-contenido.modal-chat-empresa {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 14px 18px !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

#modalChatEmpresa .modal-header-pro {
  margin: 0 !important;
  padding: 8px 10px 12px !important;
  min-height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

#modalChatEmpresa .modal-header-pro .modal-etiqueta,
#modalChatEmpresa .modal-header-pro .nota {
  display: none !important;
}

#modalChatEmpresa .modal-header-pro h2 {
  margin: 0 !important;
  font-size: clamp(22px, 2.2vw, 34px) !important;
  line-height: 1 !important;
}

#modalChatEmpresa .btn-cerrar-pro {
  padding: 12px 22px !important;
  min-width: 116px !important;
  font-weight: 800 !important;
}

#modalChatEmpresa .chat-layout-pro {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) !important;
  gap: 14px !important;
  overflow: hidden !important;
}

#modalChatEmpresa .chat-sidebar-pro {
  height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  border-radius: 20px !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

#modalChatEmpresa .chat-panel-pro {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  gap: 0 !important;
}

#modalChatEmpresa .chat-top-pro {
  padding: 14px 18px !important;
  margin: 0 !important;
  background: rgba(255,255,255,.045) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

#modalChatEmpresa .chat-mensajes-pro {
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;
  overflow-y: auto !important;
  border-radius: 0 !important;
  border: 0 !important;
  padding: 22px 24px !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(102,247,210,.10), transparent 25%),
    radial-gradient(circle at 90% 80%, rgba(92,141,255,.10), transparent 30%),
    linear-gradient(135deg, rgba(3, 14, 24, .82), rgba(7, 17, 32, .90)) !important;
}

#modalChatEmpresa .chat-formato-pro {
  padding: 10px 14px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(5, 12, 22, .72) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

#modalChatEmpresa .chat-composer-pro {
  padding: 12px 14px !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(5, 12, 22, .88) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  display: grid !important;
  grid-template-columns: auto minmax(180px, 260px) minmax(280px, 1fr) auto !important;
  gap: 10px !important;
  align-items: end !important;
}

#modalChatEmpresa .chat-composer-pro textarea {
  min-height: 48px !important;
  max-height: 120px !important;
  resize: vertical !important;
}

#modalChatEmpresa .chat-composer-pro #chatGifUrl {
  width: 100% !important;
  min-width: 0 !important;
}

#modalChatEmpresa #btnEnviarChat {
  width: auto !important;
  min-width: 104px !important;
  height: 48px !important;
  align-self: end !important;
}

#modalChatEmpresa .chat-burbuja {
  max-width: min(720px, 72%) !important;
}

#modalChatEmpresa .chat-media {
  max-width: min(360px, 64vw) !important;
  max-height: 340px !important;
}

@media (max-width: 900px) {
  #modalChatEmpresa .modal-chat-empresa,
  #modalChatEmpresa .modal-contenido.modal-chat-empresa {
    padding: 8px !important;
  }
  #modalChatEmpresa .chat-layout-pro {
    grid-template-columns: 1fr !important;
  }
  #modalChatEmpresa .chat-sidebar-pro {
    max-height: 220px !important;
  }
  #modalChatEmpresa .chat-composer-pro {
    grid-template-columns: 1fr !important;
  }
  #modalChatEmpresa #btnEnviarChat {
    width: 100% !important;
  }
  #modalChatEmpresa .chat-burbuja {
    max-width: 88% !important;
  }
}

/* =========================================================
   CHAT EMPRESARIAL - WHATSAPP WEB REAL FINAL
   Pantalla completa, lista izquierda, conversación derecha
   ========================================================= */
#modalChatEmpresa.modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  background: #f0f2f5 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#modalChatEmpresa .modal-contenido.modal-chat-empresa,
#modalChatEmpresa .modal-chat-empresa {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #f0f2f5 !important;
  border: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-rows: 0 1fr !important;
  overflow: hidden !important;
  color: #111b21 !important;
}

#modalChatEmpresa .modal-header-pro {
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 40 !important;
}

#modalChatEmpresa .modal-header-pro > div { display: none !important; }

#modalChatEmpresa #cerrarChatEmpresa {
  position: fixed !important;
  top: 14px !important;
  right: 18px !important;
  z-index: 99999 !important;
  min-width: 88px !important;
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  background: #00a884 !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
  font-weight: 800 !important;
}

#modalChatEmpresa .chat-layout-pro.chat-layout-whatsapp-real,
#modalChatEmpresa .chat-layout-pro {
  height: 100vh !important;
  min-height: 0 !important;
  width: 100vw !important;
  display: grid !important;
  grid-template-columns: 58px minmax(310px, 410px) minmax(0, 1fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  background: #f0f2f5 !important;
}

#modalChatEmpresa .chat-rail-wa {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 8px !important;
  background: #f0f2f5 !important;
  border-right: 1px solid #d1d7db !important;
  height: 100vh !important;
  box-sizing: border-box !important;
}

#modalChatEmpresa .wa-rail-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: transparent !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  color: #54656f !important;
  font-size: 18px !important;
}
#modalChatEmpresa .wa-rail-btn.activo,
#modalChatEmpresa .wa-rail-btn:hover { background: #dfe5e7 !important; }

#modalChatEmpresa .chat-sidebar-pro.chat-sidebar-wa,
#modalChatEmpresa .chat-sidebar-pro {
  height: 100vh !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  border-radius: 0 !important;
  padding: 74px 12px 14px !important;
  background: #ffffff !important;
  border: 0 !important;
  border-right: 1px solid #d1d7db !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #111b21 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  position: relative !important;
}

#modalChatEmpresa .chat-sidebar-pro::before {
  content: "WhatsApp" !important;
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #00a884 !important;
}

#modalChatEmpresa .chat-sidebar-pro .label-campo {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #667781 !important;
  margin: 3px 0 -4px !important;
}

#modalChatEmpresa .chat-sidebar-pro .input-modal,
#modalChatEmpresa .chat-sidebar-pro select,
#modalChatEmpresa .chat-sidebar-pro input {
  width: 100% !important;
  min-height: 42px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: #f0f2f5 !important;
  color: #111b21 !important;
  padding: 0 14px !important;
  box-shadow: none !important;
}

#modalChatEmpresa #btnCargarChat {
  min-height: 44px !important;
  border-radius: 999px !important;
  background: #00a884 !important;
  color: white !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}

#modalChatEmpresa .chat-list-wa,
#modalChatEmpresa .chat-mini-info {
  margin: 8px -12px 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
#modalChatEmpresa .chat-list-wa strong { padding: 12px 18px 6px !important; color: #111b21 !important; }
#modalChatEmpresa .chat-list-wa span {
  padding: 15px 18px !important;
  border-top: 1px solid #eef0f1 !important;
  color: #111b21 !important;
  font-size: 14px !important;
}
#modalChatEmpresa .chat-list-wa span:hover { background: #f5f6f6 !important; }

#modalChatEmpresa .chat-personalizador-pro {
  margin-top: auto !important;
  padding: 12px !important;
  border-radius: 14px !important;
  background: #f7f8fa !important;
  border: 1px solid #eef0f1 !important;
  color: #111b21 !important;
  max-height: 270px !important;
  overflow-y: auto !important;
}
#modalChatEmpresa .chat-personalizador-head strong { color: #111b21 !important; }
#modalChatEmpresa .chat-personalizador-head small,
#modalChatEmpresa .chat-toggle-line { color: #667781 !important; }

#modalChatEmpresa .chat-panel-pro.chat-panel-wa,
#modalChatEmpresa .chat-panel-pro {
  height: 100vh !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: #efeae2 !important;
  display: grid !important;
  grid-template-rows: 64px minmax(0, 1fr) 52px 64px !important;
  overflow: hidden !important;
  color: #111b21 !important;
}

#modalChatEmpresa .chat-top-pro {
  min-height: 64px !important;
  padding: 10px 124px 10px 16px !important;
  background: #f0f2f5 !important;
  border-bottom: 1px solid #d1d7db !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
}
#modalChatEmpresa .chat-avatar-canal {
  width: 44px !important;
  height: 44px !important;
  background: #00a884 !important;
  color: white !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
}
#modalChatEmpresa .chat-top-pro h3 { margin: 0 !important; color: #111b21 !important; font-size: 17px !important; }
#modalChatEmpresa .chat-top-pro .nota { margin: 2px 0 0 !important; color: #667781 !important; font-size: 12px !important; }

#modalChatEmpresa .chat-mensajes-pro {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 22px 7.5% !important;
  background-color: #efeae2 !important;
  background-image:
    radial-gradient(circle at 18px 18px, rgba(0,0,0,.035) 2px, transparent 2px),
    radial-gradient(circle at 42px 42px, rgba(0,0,0,.025) 2px, transparent 2px) !important;
  background-size: 64px 64px !important;
  box-sizing: border-box !important;
}

#modalChatEmpresa .chat-msg {
  display: flex !important;
  gap: 7px !important;
  align-items: flex-end !important;
  margin: 4px 0 !important;
}
#modalChatEmpresa .chat-msg.chat-propio { flex-direction: row-reverse !important; }
#modalChatEmpresa .chat-msg-avatar {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  border: 0 !important;
  background: #dfe5e7 !important;
  color: #54656f !important;
  font-size: 11px !important;
}
#modalChatEmpresa .chat-propio .chat-msg-avatar { display: none !important; }
#modalChatEmpresa .chat-burbuja {
  max-width: min(560px, 68%) !important;
  padding: 6px 8px 5px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 1px .5px rgba(11,20,26,.13) !important;
  color: #111b21 !important;
}
#modalChatEmpresa .chat-propio .chat-burbuja {
  background: #d9fdd3 !important;
  color: #111b21 !important;
}
#modalChatEmpresa .chat-msg-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin: 0 0 3px !important;
}
#modalChatEmpresa .chat-msg-head strong { color: #008069 !important; font-size: 12px !important; }
#modalChatEmpresa .chat-msg-head small { color: #667781 !important; font-size: 10px !important; }
#modalChatEmpresa .chat-burbuja p { color: #111b21 !important; line-height: 1.35 !important; }
#modalChatEmpresa .chat-media { max-width: 260px !important; max-height: 300px !important; border-radius: 8px !important; }

#modalChatEmpresa .chat-formato-pro {
  height: 52px !important;
  padding: 8px 14px !important;
  background: #f0f2f5 !important;
  border-top: 1px solid #d1d7db !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
}
#modalChatEmpresa .chat-formato-pro .input-modal,
#modalChatEmpresa .color-chat,
#modalChatEmpresa .btn-mini-glass {
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  color: #111b21 !important;
  border: 1px solid #d1d7db !important;
  box-shadow: none !important;
}

#modalChatEmpresa .chat-composer-pro {
  height: 64px !important;
  padding: 8px 12px !important;
  background: #f0f2f5 !important;
  border-top: 1px solid #d1d7db !important;
  display: grid !important;
  grid-template-columns: auto 190px minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  box-sizing: border-box !important;
}
#modalChatEmpresa .chat-adjuntar {
  height: 42px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 0 !important;
  color: #54656f !important;
  box-shadow: none !important;
}
#modalChatEmpresa .chat-composer-pro #chatGifUrl,
#modalChatEmpresa .chat-composer-pro textarea {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  border-radius: 21px !important;
  border: 0 !important;
  background: #ffffff !important;
  color: #111b21 !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
  resize: none !important;
}
#modalChatEmpresa #btnEnviarChat {
  height: 42px !important;
  min-width: 78px !important;
  border-radius: 999px !important;
  background: #00a884 !important;
  color: white !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 980px) {
  #modalChatEmpresa .chat-layout-pro { grid-template-columns: 48px 300px minmax(0, 1fr) !important; }
  #modalChatEmpresa .chat-composer-pro { grid-template-columns: auto 1fr auto !important; }
  #modalChatEmpresa .chat-composer-pro #chatGifUrl { display: none !important; }
}

@media (max-width: 760px) {
  #modalChatEmpresa .chat-layout-pro { grid-template-columns: 1fr !important; }
  #modalChatEmpresa .chat-rail-wa,
  #modalChatEmpresa .chat-sidebar-pro { display: none !important; }
  #modalChatEmpresa .chat-panel-pro { grid-column: 1 !important; }
  #modalChatEmpresa .chat-top-pro { padding-right: 104px !important; }
  #modalChatEmpresa .chat-mensajes-pro { padding: 16px 12px !important; }
  #modalChatEmpresa .chat-burbuja { max-width: 82% !important; }
}

/* === CHAT EMPRESARIAL TIPO WHATSAPP WEB - AJUSTE FINAL === */
#modalChatEmpresa {
  padding: 0 !important;
  background: rgba(0,0,0,.25) !important;
}
#modalChatEmpresa .modal-contenido.modal-chat-empresa {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--chat-frame, #f0f2f5) !important;
  color: #111827 !important;
}
#modalChatEmpresa .modal-header-pro {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 30;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}
#modalChatEmpresa .modal-header-pro > div { display: none !important; }
#modalChatEmpresa .btn-cerrar-pro {
  border-radius: 999px !important;
  min-width: 96px;
  height: 42px;
  padding: 0 20px !important;
  background: var(--chat-accent, #00a884) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.15) !important;
}
.chat-empresarial-wa-full {
  display: grid !important;
  grid-template-columns: 70px 390px minmax(0, 1fr) !important;
  gap: 0 !important;
  height: 100vh !important;
  min-height: 0 !important;
  background: var(--chat-frame, #f0f2f5) !important;
}
.chat-rail-wa {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 18px 10px;
  background: var(--chat-rail, #e9edef);
  border-right: 1px solid rgba(0,0,0,.08);
}
.wa-rail-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: none;
  background: transparent;
  color: var(--chat-muted-dark, #54656f);
  font-size: 20px;
  cursor: pointer;
}
.wa-rail-btn.activo,
.wa-rail-btn:hover {
  background: rgba(0,168,132,.12);
  color: var(--chat-accent, #00a884);
}
.chat-sidebar-personas {
  height: 100vh !important;
  border-radius: 0 !important;
  border: none !important;
  border-right: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  background: var(--chat-sidebar, #ffffff) !important;
  color: #111827 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.chat-brand-wa {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 18px 14px;
  background: var(--chat-sidebar-head, #ffffff);
}
.chat-logo-sistema {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--chat-accent, #00a884), #38bdf8);
  box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 10px 25px rgba(0,0,0,.08);
}
.chat-brand-wa h3 {
  margin: 0;
  font-size: 22px;
  color: var(--chat-title, #111827);
  line-height: 1.1;
}
.chat-brand-wa p {
  margin: 4px 0 0;
  color: #667781;
  font-size: 13px;
}
.chat-search-wa {
  margin: 0 16px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--chat-search-bg, #f0f2f5);
  border-radius: 14px;
  padding: 0 12px;
  min-height: 44px;
}
.chat-search-wa input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: #111827;
  font-size: 15px;
}
.chat-tabs-wa {
  display: flex;
  gap: 8px;
  padding: 0 16px 12px;
  overflow-x: auto;
}
.chat-tabs-wa button {
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  color: #334155;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.chat-tabs-wa button.activo {
  background: color-mix(in srgb, var(--chat-accent, #00a884) 17%, #fff);
  color: var(--chat-accent, #00a884);
}
.chat-list-header-wa {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 18px;
  color: #667781;
  font-size: 13px;
  border-top: 1px solid rgba(0,0,0,.04);
}
.lista-personas-chat-wa {
  flex: 1;
  overflow-y: auto;
  padding: 2px 0 12px;
}
.chat-persona-item {
  width: 100%;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 12px;
  border: none;
  background: transparent;
  padding: 12px 16px;
  cursor: pointer;
  text-align: left;
  color: #111827;
  border-bottom: 1px solid rgba(0,0,0,.055);
}
.chat-persona-item:hover,
.chat-persona-item.activo {
  background: var(--chat-list-active, #f0f2f5);
}
.chat-persona-foto {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--chat-accent, #00a884), #38bdf8);
}
.chat-persona-info { min-width: 0; }
.chat-persona-info strong {
  display: block;
  font-size: 16px;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-persona-info span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: #667781;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-persona-item small {
  color: var(--chat-accent, #00a884);
  font-size: 12px;
}
.chat-personalizador-wa {
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(0,0,0,.08);
  max-height: 190px;
  overflow-y: auto;
  background: var(--chat-sidebar-head, #fff);
}
.chat-personalizador-wa summary {
  font-weight: 900;
  color: var(--chat-accent, #00a884);
  cursor: pointer;
  margin-bottom: 8px;
}
.chat-panel-conversacion {
  height: 100vh !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  background: var(--chat-panel, #efeae2) !important;
  color: #111827 !important;
  display: grid !important;
  grid-template-rows: 74px minmax(0,1fr) auto !important;
  overflow: hidden !important;
}
.chat-top-wa-real {
  background: var(--chat-top, #f0f2f5) !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  padding: 0 118px 0 20px !important;
  min-height: 74px;
}
.chat-top-wa-real h3 {
  color: #111827;
  margin: 0;
  font-size: 18px;
}
.chat-top-wa-real .nota { color: #667781; }
.chat-avatar-canal img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.chat-mensajes-wa {
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow-y: auto !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 24px 9% !important;
  background-color: var(--chat-bg, #efeae2) !important;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(0,0,0,.025), transparent 25%),
    radial-gradient(circle at 85% 80%, rgba(0,0,0,.025), transparent 25%) !important;
}
.chat-mensajes-wa .nota { color: #667781; }
.chat-msg { margin: 6px 0 !important; }
.chat-msg-avatar { display: none !important; }
.chat-burbuja {
  max-width: min(560px, 74%) !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #111827 !important;
  border: none !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.10) !important;
}
.chat-propio .chat-burbuja {
  background: var(--chat-own, #d9fdd3) !important;
  color: #111827 !important;
}
.chat-msg-head strong { color: var(--chat-accent, #00a884) !important; }
.chat-msg-head small { color: #667781 !important; }
.chat-burbuja p { color: inherit !important; font-size: 16px; }
.chat-media { max-width: 320px !important; border-radius: 8px !important; }
.chat-composer-wa-real {
  min-height: 74px;
  padding: 10px 18px !important;
  background: var(--chat-composer, #f0f2f5) !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
  display: grid !important;
  grid-template-columns: 46px 46px 170px minmax(260px,1fr) auto 96px !important;
  gap: 10px !important;
  align-items: center !important;
}
.btn-chat-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  display: grid;
  place-items: center;
  background: transparent;
  color: #54656f;
  font-size: 20px;
  cursor: pointer;
  font-weight: 900;
}
.btn-chat-icon:hover { background: rgba(0,0,0,.06); }
.chat-gif-wa,
.chat-textarea-wa {
  border: none !important;
  outline: none !important;
  background: #fff !important;
  color: #111827 !important;
  border-radius: 22px !important;
  min-height: 48px !important;
  padding: 13px 16px !important;
  font-size: 16px !important;
  box-shadow: none !important;
  resize: none !important;
}
.chat-textarea-wa { line-height: 1.35; }
.chat-format-mini {
  display: flex;
  align-items: center;
  gap: 4px;
}
.chat-format-mini select,
.chat-format-mini input[type="color"] {
  height: 34px;
  max-width: 74px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  color: #111827;
  font-size: 12px;
}
.chat-format-mini .btn-chat-icon {
  width: 34px;
  height: 34px;
  font-size: 13px;
}
.btn-chat-send {
  height: 48px;
  border: none;
  border-radius: 999px;
  background: var(--chat-accent, #00a884);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--chat-accent, #00a884) 35%, transparent);
}
#modalChatEmpresa.chat-tema-whatsapp,
#modalChatEmpresa.chat-tema-claro {
  --chat-accent: #00a884; --chat-frame:#f0f2f5; --chat-rail:#e9edef; --chat-sidebar:#fff; --chat-sidebar-head:#fff; --chat-search-bg:#f0f2f5; --chat-top:#f0f2f5; --chat-bg:#efeae2; --chat-composer:#f0f2f5; --chat-own:#d9fdd3; --chat-list-active:#f0f2f5;
}
#modalChatEmpresa.chat-tema-neon {
  --chat-accent:#00e5ff; --chat-frame:#07111f; --chat-rail:#081827; --chat-sidebar:#0b1c2b; --chat-sidebar-head:#0d2335; --chat-search-bg:#132d42; --chat-top:#102334; --chat-bg:#07111f; --chat-composer:#102334; --chat-own:#9ffcff; --chat-list-active:#13344c; --chat-title:#e6fbff;
}
#modalChatEmpresa.chat-tema-glass,
#modalChatEmpresa.chat-tema-carbono {
  --chat-accent:#8b5cf6; --chat-frame:#111827; --chat-rail:#0f172a; --chat-sidebar:#182232; --chat-sidebar-head:#111827; --chat-search-bg:#253044; --chat-top:#172033; --chat-bg:#101827; --chat-composer:#172033; --chat-own:#ddd6fe; --chat-list-active:#273244; --chat-title:#f8fafc;
}
#modalChatEmpresa.chat-tema-azul {
  --chat-accent:#2563eb; --chat-frame:#eaf2ff; --chat-rail:#dbeafe; --chat-sidebar:#ffffff; --chat-sidebar-head:#eff6ff; --chat-search-bg:#eff6ff; --chat-top:#eff6ff; --chat-bg:#eaf2ff; --chat-composer:#eff6ff; --chat-own:#bfdbfe; --chat-list-active:#dbeafe;
}
#modalChatEmpresa.chat-tema-morado {
  --chat-accent:#9333ea; --chat-frame:#f5edff; --chat-rail:#ede9fe; --chat-sidebar:#fff; --chat-sidebar-head:#faf5ff; --chat-search-bg:#f3e8ff; --chat-top:#faf5ff; --chat-bg:#f5edff; --chat-composer:#faf5ff; --chat-own:#e9d5ff; --chat-list-active:#f3e8ff;
}
#modalChatEmpresa.chat-tema-dorado {
  --chat-accent:#b8860b; --chat-frame:#1a1408; --chat-rail:#241b0c; --chat-sidebar:#fff8e1; --chat-sidebar-head:#fff3c4; --chat-search-bg:#fff0b3; --chat-top:#fff3c4; --chat-bg:#fbf2d2; --chat-composer:#fff3c4; --chat-own:#fde68a; --chat-list-active:#fff0b3;
}
#modalChatEmpresa.chat-tema-tactico {
  --chat-accent:#16a34a; --chat-frame:#10170f; --chat-rail:#172114; --chat-sidebar:#202b1d; --chat-sidebar-head:#172114; --chat-search-bg:#293827; --chat-top:#1b2a1b; --chat-bg:#10170f; --chat-composer:#1b2a1b; --chat-own:#bbf7d0; --chat-list-active:#293827; --chat-title:#f7fee7;
}
#modalChatEmpresa.chat-tema-ejecutivo {
  --chat-accent:#475569; --chat-frame:#eef2f7; --chat-rail:#e2e8f0; --chat-sidebar:#fff; --chat-sidebar-head:#f8fafc; --chat-search-bg:#f1f5f9; --chat-top:#f8fafc; --chat-bg:#eef2f7; --chat-composer:#f8fafc; --chat-own:#e2e8f0; --chat-list-active:#f1f5f9;
}
#modalChatEmpresa:is(.chat-tema-neon,.chat-tema-glass,.chat-tema-carbono,.chat-tema-tactico) .chat-brand-wa h3,
#modalChatEmpresa:is(.chat-tema-neon,.chat-tema-glass,.chat-tema-carbono,.chat-tema-tactico) .chat-persona-info strong,
#modalChatEmpresa:is(.chat-tema-neon,.chat-tema-glass,.chat-tema-carbono,.chat-tema-tactico) .chat-top-wa-real h3 {
  color: var(--chat-title, #fff) !important;
}
#modalChatEmpresa:is(.chat-tema-neon,.chat-tema-glass,.chat-tema-carbono,.chat-tema-tactico) .chat-persona-info span,
#modalChatEmpresa:is(.chat-tema-neon,.chat-tema-glass,.chat-tema-carbono,.chat-tema-tactico) .chat-brand-wa p,
#modalChatEmpresa:is(.chat-tema-neon,.chat-tema-glass,.chat-tema-carbono,.chat-tema-tactico) .chat-list-header-wa {
  color: rgba(255,255,255,.68) !important;
}
@media (max-width: 900px) {
  .chat-empresarial-wa-full { grid-template-columns: 54px 300px minmax(0,1fr) !important; }
  .chat-composer-wa-real { grid-template-columns: 40px 1fr 82px !important; }
  .chat-gif-wa, .chat-format-mini, #chatEmojiBtn { display: none !important; }
}

/* ==========================================================
   CHAT EMPRESARIAL - WHATSAPP WEB REAL FINAL FIX
   Corrige pantalla partida, quita filtros y usa lista de personas.
   ========================================================== */
#modalChatEmpresa.modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  background: var(--chat-frame, #f0f2f5) !important;
  overflow: hidden !important;
  z-index: 9999 !important;
}
#modalChatEmpresa.oculto { display: none !important; }
#modalChatEmpresa .modal-contenido.modal-chat-empresa {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: var(--chat-frame, #f0f2f5) !important;
  box-shadow: none !important;
}
#modalChatEmpresa .modal-header-pro {
  position: fixed !important;
  top: 16px !important;
  right: 22px !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  z-index: 50 !important;
}
#modalChatEmpresa .modal-header-pro > div { display: none !important; }
#modalChatEmpresa .btn-cerrar-pro {
  height: 42px !important;
  min-width: 104px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  border: none !important;
  background: var(--chat-accent, #00a884) !important;
  color: #fff !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.18) !important;
}
#modalChatEmpresa .chat-layout-pro.chat-empresarial-wa-full {
  position: absolute !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 64px 390px minmax(0, 1fr) !important;
  gap: 0 !important;
  background: var(--chat-frame, #f0f2f5) !important;
  overflow: hidden !important;
}
#modalChatEmpresa .chat-rail-wa {
  grid-column: 1 !important;
  height: 100vh !important;
  width: 64px !important;
  padding: 16px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 18px !important;
  background: var(--chat-rail, #e9edef) !important;
  border-right: 1px solid var(--chat-border, rgba(0,0,0,.08)) !important;
  overflow: hidden !important;
}
#modalChatEmpresa .chat-sidebar-personas {
  grid-column: 2 !important;
  width: 390px !important;
  min-width: 390px !important;
  max-width: 390px !important;
  height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--chat-border, rgba(0,0,0,.08)) !important;
  border-radius: 0 !important;
  background: var(--chat-sidebar, #fff) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#modalChatEmpresa .chat-panel-conversacion {
  grid-column: 3 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--chat-bg, #efeae2) !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-rows: 72px minmax(0, 1fr) 72px !important;
  overflow: hidden !important;
}
#modalChatEmpresa .chat-tabs-wa,
#modalChatEmpresa #chatEmpresa,
#modalChatEmpresa #chatProyecto,
#modalChatEmpresa #chatCanal,
#modalChatEmpresa #btnCargarChat {
  display: none !important;
}
#modalChatEmpresa .chat-brand-wa {
  flex: 0 0 auto !important;
  min-height: 76px !important;
  padding: 13px 16px !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) 42px !important;
  gap: 12px !important;
  align-items: center !important;
  background: var(--chat-sidebar-head, #fff) !important;
  border-bottom: 1px solid var(--chat-border, rgba(0,0,0,.06)) !important;
}
#modalChatEmpresa .chat-logo-sistema {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: linear-gradient(135deg, var(--chat-accent, #00a884), var(--chat-accent-2, #38bdf8)) !important;
}
#modalChatEmpresa .chat-logo-empresa-mini {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.75) !important;
  padding: 4px !important;
}
#modalChatEmpresa .chat-brand-wa h3 {
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
  color: var(--chat-title, #111b21) !important;
  font-weight: 900 !important;
}
#modalChatEmpresa .chat-brand-wa p {
  margin: 4px 0 0 !important;
  color: var(--chat-muted, #667781) !important;
  font-size: 13px !important;
}
#modalChatEmpresa .chat-search-wa {
  flex: 0 0 auto !important;
  margin: 10px 14px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  background: var(--chat-search-bg, #f0f2f5) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
#modalChatEmpresa .chat-search-wa input {
  width: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--chat-text, #111b21) !important;
  font-size: 15px !important;
}
#modalChatEmpresa .chat-list-header-wa {
  flex: 0 0 auto !important;
  padding: 7px 16px !important;
  color: var(--chat-muted, #667781) !important;
  font-size: 13px !important;
  display: flex !important;
  justify-content: space-between !important;
  border-bottom: 1px solid var(--chat-border, rgba(0,0,0,.04)) !important;
}
#modalChatEmpresa .lista-personas-chat-wa {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  background: var(--chat-sidebar, #fff) !important;
}
#modalChatEmpresa .chat-persona-item {
  width: 100% !important;
  min-height: 74px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--chat-border, rgba(0,0,0,.055)) !important;
  background: transparent !important;
  color: var(--chat-text, #111b21) !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0,1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 10px 16px !important;
  text-align: left !important;
  cursor: pointer !important;
}
#modalChatEmpresa .chat-persona-item:hover,
#modalChatEmpresa .chat-persona-item.activo {
  background: var(--chat-list-active, #f0f2f5) !important;
}
#modalChatEmpresa .chat-persona-foto {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--chat-accent, #00a884), var(--chat-accent-2, #38bdf8)) !important;
}
#modalChatEmpresa .chat-persona-info strong {
  color: var(--chat-text, #111b21) !important;
  display: block !important;
  font-size: 16px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#modalChatEmpresa .chat-persona-info span {
  color: var(--chat-muted, #667781) !important;
  display: block !important;
  margin-top: 3px !important;
  font-size: 13px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#modalChatEmpresa .chat-persona-item small { color: var(--chat-accent, #00a884) !important; }
#modalChatEmpresa .chat-personalizador-wa {
  flex: 0 0 auto !important;
  max-height: 148px !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding: 10px 16px 12px !important;
  border-top: 1px solid var(--chat-border, rgba(0,0,0,.08)) !important;
  background: var(--chat-sidebar-head, #fff) !important;
}
#modalChatEmpresa .chat-personalizador-wa summary {
  color: var(--chat-accent, #00a884) !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}
#modalChatEmpresa .chat-top-wa-real {
  height: 72px !important;
  min-height: 72px !important;
  padding: 0 132px 0 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: var(--chat-top, #f0f2f5) !important;
  border-bottom: 1px solid var(--chat-border, rgba(0,0,0,.08)) !important;
}
#modalChatEmpresa .chat-top-wa-real h3 {
  color: var(--chat-text, #111b21) !important;
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}
#modalChatEmpresa .chat-top-wa-real .nota { color: var(--chat-muted, #667781) !important; }
#modalChatEmpresa .chat-avatar-canal {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--chat-accent, #00a884), var(--chat-accent-2, #38bdf8)) !important;
  color: #fff !important;
  box-shadow: none !important;
}
#modalChatEmpresa .chat-avatar-canal img { width:100% !important; height:100% !important; object-fit:cover !important; border-radius:50% !important; }
#modalChatEmpresa .chat-mensajes-wa {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  padding: 24px clamp(24px, 9vw, 120px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: var(--chat-bg, #efeae2) !important;
  background-image: radial-gradient(circle at 18% 18%, rgba(0,0,0,.025), transparent 26%), radial-gradient(circle at 80% 75%, rgba(0,0,0,.025), transparent 28%) !important;
}
#modalChatEmpresa .chat-msg { margin: 7px 0 !important; }
#modalChatEmpresa .chat-msg.chat-propio { flex-direction: row-reverse !important; }
#modalChatEmpresa .chat-msg-avatar { display: none !important; }
#modalChatEmpresa .chat-burbuja {
  max-width: min(560px, 76%) !important;
  border: 0 !important;
  border-radius: 9px !important;
  padding: 7px 10px !important;
  background: var(--chat-other, #fff) !important;
  color: var(--chat-text, #111b21) !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.10) !important;
}
#modalChatEmpresa .chat-propio .chat-burbuja { background: var(--chat-own, #d9fdd3) !important; }
#modalChatEmpresa .chat-msg-head strong { color: var(--chat-accent, #00a884) !important; font-size: 12px !important; }
#modalChatEmpresa .chat-msg-head small { color: var(--chat-muted, #667781) !important; font-size: 10px !important; }
#modalChatEmpresa .chat-burbuja p { color: inherit !important; line-height: 1.35 !important; }
#modalChatEmpresa .chat-media { max-width: 320px !important; border-radius: 8px !important; display:block !important; margin-top:6px !important; }
#modalChatEmpresa .chat-composer-wa-real {
  height: 72px !important;
  min-height: 72px !important;
  padding: 9px 16px !important;
  background: var(--chat-composer, #f0f2f5) !important;
  border-top: 1px solid var(--chat-border, rgba(0,0,0,.08)) !important;
  display: grid !important;
  grid-template-columns: 44px 44px minmax(0, 1fr) 100px !important;
  gap: 10px !important;
  align-items: center !important;
}
#modalChatEmpresa .chat-gif-wa,
#modalChatEmpresa .chat-format-mini { display: none !important; }
#modalChatEmpresa .btn-chat-icon {
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--chat-muted, #54656f) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 20px !important;
}
#modalChatEmpresa .btn-chat-icon:hover { background: color-mix(in srgb, var(--chat-accent, #00a884) 12%, transparent) !important; }
#modalChatEmpresa .chat-textarea-wa {
  width: 100% !important;
  min-height: 48px !important;
  max-height: 48px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: var(--chat-input-bg, #fff) !important;
  color: var(--chat-text, #111b21) !important;
  padding: 13px 18px !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  outline: none !important;
  resize: none !important;
}
#modalChatEmpresa .btn-chat-send {
  height: 48px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--chat-accent, #00a884) !important;
  color: #fff !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--chat-accent, #00a884) 30%, transparent) !important;
}
#modalChatEmpresa.chat-tema-whatsapp,
#modalChatEmpresa.chat-tema-claro {
  --chat-accent:#00a884; --chat-accent-2:#38bdf8; --chat-frame:#f0f2f5; --chat-rail:#e9edef; --chat-sidebar:#fff; --chat-sidebar-head:#fff; --chat-search-bg:#f0f2f5; --chat-top:#f0f2f5; --chat-bg:#efeae2; --chat-composer:#f0f2f5; --chat-input-bg:#fff; --chat-own:#d9fdd3; --chat-other:#fff; --chat-list-active:#f0f2f5; --chat-text:#111b21; --chat-muted:#667781; --chat-border:rgba(0,0,0,.08);
}
#modalChatEmpresa.chat-tema-neon {
  --chat-accent:#00e5ff; --chat-accent-2:#a855f7; --chat-frame:#07111f; --chat-rail:#081827; --chat-sidebar:#0b1c2b; --chat-sidebar-head:#0d2335; --chat-search-bg:#132d42; --chat-top:#102334; --chat-bg:#07111f; --chat-composer:#102334; --chat-input-bg:#132d42; --chat-own:#092f3a; --chat-other:#0d2335; --chat-list-active:#13344c; --chat-text:#e6fbff; --chat-muted:rgba(230,251,255,.7); --chat-border:rgba(0,229,255,.18);
}
#modalChatEmpresa.chat-tema-glass,
#modalChatEmpresa.chat-tema-carbono {
  --chat-accent:#8b5cf6; --chat-accent-2:#06b6d4; --chat-frame:#111827; --chat-rail:#0f172a; --chat-sidebar:#182232; --chat-sidebar-head:#111827; --chat-search-bg:#253044; --chat-top:#172033; --chat-bg:#101827; --chat-composer:#172033; --chat-input-bg:#253044; --chat-own:#312e81; --chat-other:#1f2937; --chat-list-active:#273244; --chat-text:#f8fafc; --chat-muted:rgba(248,250,252,.7); --chat-border:rgba(139,92,246,.22);
}
#modalChatEmpresa.chat-tema-azul { --chat-accent:#2563eb; --chat-accent-2:#38bdf8; --chat-frame:#eaf2ff; --chat-rail:#dbeafe; --chat-sidebar:#fff; --chat-sidebar-head:#eff6ff; --chat-search-bg:#eff6ff; --chat-top:#eff6ff; --chat-bg:#eaf2ff; --chat-composer:#eff6ff; --chat-input-bg:#fff; --chat-own:#bfdbfe; --chat-other:#fff; --chat-list-active:#dbeafe; --chat-text:#111b21; --chat-muted:#475569; --chat-border:rgba(37,99,235,.18); }
#modalChatEmpresa.chat-tema-morado { --chat-accent:#9333ea; --chat-accent-2:#f0abfc; --chat-frame:#f5edff; --chat-rail:#ede9fe; --chat-sidebar:#fff; --chat-sidebar-head:#faf5ff; --chat-search-bg:#f3e8ff; --chat-top:#faf5ff; --chat-bg:#f5edff; --chat-composer:#faf5ff; --chat-input-bg:#fff; --chat-own:#e9d5ff; --chat-other:#fff; --chat-list-active:#f3e8ff; --chat-text:#111b21; --chat-muted:#6b7280; --chat-border:rgba(147,51,234,.18); }
#modalChatEmpresa.chat-tema-dorado { --chat-accent:#b8860b; --chat-accent-2:#facc15; --chat-frame:#1a1408; --chat-rail:#241b0c; --chat-sidebar:#fff8e1; --chat-sidebar-head:#fff3c4; --chat-search-bg:#fff0b3; --chat-top:#fff3c4; --chat-bg:#fbf2d2; --chat-composer:#fff3c4; --chat-input-bg:#fff8e1; --chat-own:#fde68a; --chat-other:#fff8e1; --chat-list-active:#fff0b3; --chat-text:#271b05; --chat-muted:#7c5f18; --chat-border:rgba(184,134,11,.22); }
#modalChatEmpresa.chat-tema-tactico { --chat-accent:#16a34a; --chat-accent-2:#84cc16; --chat-frame:#10170f; --chat-rail:#172114; --chat-sidebar:#202b1d; --chat-sidebar-head:#172114; --chat-search-bg:#293827; --chat-top:#1b2a1b; --chat-bg:#10170f; --chat-composer:#1b2a1b; --chat-input-bg:#293827; --chat-own:#14532d; --chat-other:#202b1d; --chat-list-active:#293827; --chat-text:#f7fee7; --chat-muted:rgba(247,254,231,.68); --chat-border:rgba(22,163,74,.2); }
#modalChatEmpresa.chat-tema-ejecutivo { --chat-accent:#475569; --chat-accent-2:#94a3b8; --chat-frame:#eef2f7; --chat-rail:#e2e8f0; --chat-sidebar:#fff; --chat-sidebar-head:#f8fafc; --chat-search-bg:#f1f5f9; --chat-top:#f8fafc; --chat-bg:#eef2f7; --chat-composer:#f8fafc; --chat-input-bg:#fff; --chat-own:#e2e8f0; --chat-other:#fff; --chat-list-active:#f1f5f9; --chat-text:#111827; --chat-muted:#64748b; --chat-border:rgba(71,85,105,.16); }
@media (max-width: 960px) {
  #modalChatEmpresa .chat-layout-pro.chat-empresarial-wa-full { grid-template-columns: 54px 320px minmax(0, 1fr) !important; }
  #modalChatEmpresa .chat-sidebar-personas { width: 320px !important; min-width: 320px !important; max-width: 320px !important; }
  #modalChatEmpresa .chat-composer-wa-real { grid-template-columns: 42px minmax(0,1fr) 86px !important; }
  #modalChatEmpresa #chatEmojiBtn { display: none !important; }
}


/* ==========================================================
   SOFTWARE ESM - CHAT FINAL REAL (empresa + metal + temas completos)
   ========================================================== */
#modalChatEmpresa.modal {
  --chat-accent:#6fd8ff;
  --chat-accent-2:#c7d2fe;
  --chat-frame:linear-gradient(135deg,#c7ccd6 0%,#eef2f7 45%,#9ca3af 100%);
  --chat-rail:linear-gradient(180deg,#d9dee8,#aeb6c4);
  --chat-sidebar:linear-gradient(180deg,#f4f7fb,#cbd5e1 58%,#aeb6c4);
  --chat-sidebar-head:linear-gradient(135deg,rgba(255,255,255,.78),rgba(148,163,184,.46));
  --chat-search-bg:rgba(255,255,255,.72);
  --chat-panel:linear-gradient(135deg,#e9eef6,#cbd5e1 55%,#9ca3af);
  --chat-top:linear-gradient(90deg,rgba(255,255,255,.72),rgba(148,163,184,.38));
  --chat-bg:linear-gradient(145deg,#e7edf5,#c9d2dd 55%,#aab2be);
  --chat-composer:linear-gradient(90deg,rgba(255,255,255,.78),rgba(148,163,184,.55));
  --chat-input-bg:rgba(255,255,255,.9);
  --chat-own:linear-gradient(135deg,#dff7ff,#bde8ff);
  --chat-other:rgba(255,255,255,.86);
  --chat-list-active:rgba(255,255,255,.65);
  --chat-text:#0f172a;
  --chat-muted:#475569;
  --chat-border:rgba(71,85,105,.25);
}

#modalChatEmpresa.chat-tema-metal {
  --chat-accent:#6fd8ff; --chat-accent-2:#c7d2fe;
  --chat-frame:linear-gradient(135deg,#b8c0cc,#eef2f7 44%,#88919d);
  --chat-rail:linear-gradient(180deg,#cbd5e1,#94a3b8);
  --chat-sidebar:linear-gradient(180deg,#f8fafc,#d9e0ea 54%,#a5afbd);
  --chat-sidebar-head:linear-gradient(135deg,rgba(255,255,255,.86),rgba(148,163,184,.5));
  --chat-panel:linear-gradient(145deg,#edf2f8,#cbd5e1 58%,#94a3b8);
  --chat-bg:linear-gradient(145deg,#eef3f8,#cfd8e3 58%,#9aa3af);
  --chat-composer:linear-gradient(90deg,rgba(255,255,255,.82),rgba(148,163,184,.58));
  --chat-input-bg:rgba(255,255,255,.92);
  --chat-own:linear-gradient(135deg,#dff7ff,#b7e6ff);
  --chat-other:rgba(255,255,255,.86);
  --chat-list-active:rgba(255,255,255,.64);
  --chat-text:#0f172a; --chat-muted:#475569; --chat-border:rgba(51,65,85,.25);
}
#modalChatEmpresa.chat-tema-neon { --chat-frame:#07111f; --chat-rail:#081827; --chat-sidebar:#0b1c2b; --chat-sidebar-head:#0d2335; --chat-search-bg:#132d42; --chat-panel:#07111f; --chat-top:#102334; --chat-bg:#07111f; --chat-composer:#102334; --chat-input-bg:#132d42; --chat-text:#e6fbff; --chat-muted:rgba(230,251,255,.7); --chat-border:rgba(0,229,255,.18); }
#modalChatEmpresa.chat-tema-glass,#modalChatEmpresa.chat-tema-carbono { --chat-frame:#111827; --chat-rail:#0f172a; --chat-sidebar:#182232; --chat-sidebar-head:#111827; --chat-search-bg:#253044; --chat-panel:#101827; --chat-top:#172033; --chat-bg:#101827; --chat-composer:#172033; --chat-input-bg:#253044; --chat-text:#f8fafc; --chat-muted:rgba(248,250,252,.7); --chat-border:rgba(139,92,246,.22); }
#modalChatEmpresa.chat-tema-azul { --chat-frame:#eaf2ff; --chat-rail:#dbeafe; --chat-sidebar:#eff6ff; --chat-sidebar-head:#dbeafe; --chat-search-bg:#ffffff; --chat-panel:#eaf2ff; --chat-top:#dbeafe; --chat-bg:#eaf2ff; --chat-composer:#dbeafe; --chat-input-bg:#fff; --chat-text:#0f172a; --chat-muted:#475569; --chat-border:rgba(37,99,235,.18); }
#modalChatEmpresa.chat-tema-morado { --chat-frame:#f5edff; --chat-rail:#ede9fe; --chat-sidebar:#faf5ff; --chat-sidebar-head:#f3e8ff; --chat-search-bg:#fff; --chat-panel:#f5edff; --chat-top:#f3e8ff; --chat-bg:#f5edff; --chat-composer:#f3e8ff; --chat-input-bg:#fff; --chat-text:#0f172a; --chat-muted:#6b7280; --chat-border:rgba(147,51,234,.18); }
#modalChatEmpresa.chat-tema-dorado { --chat-frame:#1a1408; --chat-rail:#241b0c; --chat-sidebar:#fff8e1; --chat-sidebar-head:#fff3c4; --chat-search-bg:#fff0b3; --chat-panel:#fbf2d2; --chat-top:#fff3c4; --chat-bg:#fbf2d2; --chat-composer:#fff3c4; --chat-input-bg:#fff8e1; --chat-text:#271b05; --chat-muted:#7c5f18; --chat-border:rgba(184,134,11,.22); }
#modalChatEmpresa.chat-tema-tactico { --chat-frame:#10170f; --chat-rail:#172114; --chat-sidebar:#202b1d; --chat-sidebar-head:#172114; --chat-search-bg:#293827; --chat-panel:#10170f; --chat-top:#1b2a1b; --chat-bg:#10170f; --chat-composer:#1b2a1b; --chat-input-bg:#293827; --chat-text:#f7fee7; --chat-muted:rgba(247,254,231,.68); --chat-border:rgba(22,163,74,.2); }
#modalChatEmpresa.chat-tema-ejecutivo { --chat-frame:#eef2f7; --chat-rail:#e2e8f0; --chat-sidebar:#f8fafc; --chat-sidebar-head:#e2e8f0; --chat-search-bg:#fff; --chat-panel:#eef2f7; --chat-top:#e2e8f0; --chat-bg:#eef2f7; --chat-composer:#e2e8f0; --chat-input-bg:#fff; --chat-text:#111827; --chat-muted:#64748b; --chat-border:rgba(71,85,105,.16); }

#modalChatEmpresa .modal-header-pro > div { display:none!important; }
#modalChatEmpresa .modal-contenido.modal-chat-empresa{background:var(--chat-frame)!important;}
#modalChatEmpresa .chat-layout-pro.chat-empresarial-wa-full{grid-template-columns:64px minmax(420px,480px) minmax(0,1fr)!important;background:var(--chat-frame)!important;}
#modalChatEmpresa .chat-rail-wa{background:var(--chat-rail)!important;border-right:1px solid var(--chat-border)!important;}
#modalChatEmpresa .chat-sidebar-pro.chat-sidebar-wa{width:100%!important;min-width:420px!important;max-width:480px!important;background:var(--chat-sidebar)!important;border-right:1px solid var(--chat-border)!important;padding:0!important;color:var(--chat-text)!important;}
#modalChatEmpresa .chat-sidebar-pro::before{content:none!important;display:none!important;}
#modalChatEmpresa .chat-brand-wa{height:96px!important;background:var(--chat-sidebar-head)!important;border-bottom:1px solid var(--chat-border)!important;padding:18px 20px!important;display:flex!important;gap:14px!important;align-items:center!important;}
#modalChatEmpresa .chat-logo-empresa-principal{width:58px!important;height:58px!important;border-radius:50%!important;object-fit:cover!important;background:linear-gradient(135deg,var(--chat-accent),var(--chat-accent-2))!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--chat-accent) 18%,transparent)!important;}
#modalChatEmpresa .chat-logo-empresa-principal.sin-logo::before{content:'EMP';font-weight:900;color:white;}
#modalChatEmpresa .chat-logo-sistema-mini{width:30px!important;height:30px!important;border-radius:10px!important;object-fit:cover!important;opacity:.85!important;margin-left:auto!important;}
#modalChatEmpresa .chat-brand-texto h3{margin:0!important;color:var(--chat-text)!important;font-size:24px!important;font-weight:950!important;line-height:1.05!important;}
#modalChatEmpresa .chat-brand-texto p{margin:4px 0 0!important;color:var(--chat-muted)!important;font-size:13px!important;}
#modalChatEmpresa .chat-search-wa{margin:14px 18px!important;background:var(--chat-search-bg)!important;border:1px solid var(--chat-border)!important;border-radius:18px!important;height:50px!important;}
#modalChatEmpresa .chat-search-wa input{font-size:16px!important;color:var(--chat-text)!important;}
#modalChatEmpresa .chat-tabs-wa,#modalChatEmpresa #chatEmpresa,#modalChatEmpresa #chatCanal,#modalChatEmpresa #btnCargarChat{display:none!important;}
#modalChatEmpresa .chat-list-header-wa{padding:10px 18px!important;color:var(--chat-muted)!important;border-top:1px solid var(--chat-border)!important;border-bottom:1px solid var(--chat-border)!important;}
#modalChatEmpresa .lista-personas-chat-wa{flex:1!important;overflow-y:auto!important;padding:10px 12px!important;background:transparent!important;}
#modalChatEmpresa .chat-persona-item{height:76px!important;border-radius:16px!important;margin-bottom:8px!important;background:transparent!important;border:1px solid transparent!important;color:var(--chat-text)!important;}
#modalChatEmpresa .chat-persona-item:hover,#modalChatEmpresa .chat-persona-item.activo{background:var(--chat-list-active)!important;border-color:var(--chat-border)!important;}
#modalChatEmpresa .chat-persona-info strong{font-size:17px!important;color:var(--chat-text)!important;}
#modalChatEmpresa .chat-persona-info span{font-size:13px!important;color:var(--chat-muted)!important;}
#modalChatEmpresa .chat-personalizador-wa{position:fixed!important;left:8px!important;bottom:12px!important;width:48px!important;max-height:56px!important;overflow:visible!important;padding:0!important;background:transparent!important;border:0!important;z-index:100000!important;}
#modalChatEmpresa .chat-personalizador-wa summary{width:48px!important;height:48px!important;border-radius:16px!important;background:var(--chat-sidebar-head)!important;border:1px solid var(--chat-border)!important;display:grid!important;place-items:center!important;color:var(--chat-text)!important;font-size:0!important;list-style:none!important;box-shadow:0 12px 26px rgba(0,0,0,.18)!important;}
#modalChatEmpresa .chat-personalizador-wa summary::after{content:'🎨';font-size:22px!important;}
#modalChatEmpresa .chat-personalizador-wa[open]{left:72px!important;bottom:14px!important;width:330px!important;max-height:430px!important;overflow:auto!important;padding:16px!important;background:var(--chat-sidebar-head)!important;border:1px solid var(--chat-border)!important;border-radius:20px!important;box-shadow:0 20px 50px rgba(0,0,0,.28)!important;}
#modalChatEmpresa .chat-personalizador-wa[open] summary{width:auto!important;height:auto!important;background:transparent!important;border:0!important;display:block!important;font-size:16px!important;box-shadow:none!important;color:var(--chat-text)!important;margin-bottom:12px!important;}
#modalChatEmpresa .chat-personalizador-wa[open] summary::after{content:''!important;}
#modalChatEmpresa .chat-panel-pro.chat-panel-wa{background:var(--chat-panel)!important;color:var(--chat-text)!important;}
#modalChatEmpresa .chat-top-wa-real{background:var(--chat-top)!important;border-bottom:1px solid var(--chat-border)!important;height:76px!important;}
#modalChatEmpresa .chat-top-wa-real h3{font-size:22px!important;color:var(--chat-text)!important;}
#modalChatEmpresa .chat-mensajes-wa{background:var(--chat-bg)!important;padding:26px clamp(40px,7vw,120px)!important;}
#modalChatEmpresa .chat-composer-wa-real{position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:82px!important;background:var(--chat-composer)!important;border-top:1px solid var(--chat-border)!important;grid-template-columns:48px 48px minmax(0,1fr) 116px!important;padding:12px 20px!important;}
#modalChatEmpresa .chat-textarea-wa{height:54px!important;min-height:54px!important;max-height:54px!important;font-size:18px!important;background:var(--chat-input-bg)!important;color:var(--chat-text)!important;border:1px solid var(--chat-border)!important;border-radius:28px!important;padding:14px 22px!important;}
#modalChatEmpresa .btn-chat-send{height:54px!important;font-size:16px!important;background:linear-gradient(135deg,var(--chat-accent),var(--chat-accent-2))!important;}
#modalChatEmpresa .chat-gif-wa,#modalChatEmpresa .chat-format-mini{display:none!important;}
#modalChatEmpresa #cerrarChatEmpresa{background:linear-gradient(135deg,var(--chat-accent),var(--chat-accent-2))!important;color:#fff!important;}
@media(max-width:900px){#modalChatEmpresa .chat-layout-pro.chat-empresarial-wa-full{grid-template-columns:56px 360px minmax(0,1fr)!important}#modalChatEmpresa .chat-sidebar-pro.chat-sidebar-wa{min-width:360px!important;max-width:360px!important}}

/* ULTRA PREMIUM CHAT */
body,.chat-container,.chat-main{
background:radial-gradient(circle at top,#0f172a,#020617)!important;
color:#e2e8f0!important;
}
.sidebar-chat,.sidebar,.left-panel{
width:390px!important;
background:linear-gradient(180deg,#07111f,#111827,#0f172a)!important;
border-right:1px solid rgba(59,130,246,.35)!important;
box-shadow:0 0 25px rgba(59,130,246,.25)!important;
}
.chat-header,.topbar{
background:rgba(2,6,23,.85)!important;
backdrop-filter:blur(12px)!important;
border-bottom:1px solid rgba(59,130,246,.25)!important;
}
.chat-item,.usuario-chat{
background:rgba(15,23,42,.7)!important;
border:1px solid rgba(59,130,246,.18)!important;
border-radius:16px!important;
margin:8px!important;
transition:.25s!important;
}
.chat-item:hover{
transform:scale(1.02)!important;
box-shadow:0 0 20px rgba(59,130,246,.35)!important;
}
input,textarea{
background:rgba(15,23,42,.9)!important;
border:1px solid rgba(59,130,246,.25)!important;
color:white!important;
font-size:17px!important;
border-radius:18px!important;
padding:14px!important;
}
button{
border-radius:18px!important;
background:linear-gradient(135deg,#2563eb,#06b6d4)!important;
color:white!important;
}


/* === ULTRA PREMIUM CENTRAL OPERATIVA OVERRIDE === */
#modalChatEmpresa .chat-sidebar-pro::before{content:"" !important;display:none !important;}
#modalChatEmpresa .chat-layout-pro.chat-layout-whatsapp-real,
#modalChatEmpresa .chat-layout-pro,
.chat-empresarial-wa-full{
background: radial-gradient(circle at top,#10335f 0%,#050b18 35%,#03060d 100%) !important;
}
#modalChatEmpresa .chat-rail-wa{
background:linear-gradient(180deg,rgba(10,20,40,.95),rgba(5,10,20,.98)) !important;
border-right:1px solid rgba(80,180,255,.2) !important;
backdrop-filter:blur(18px) !important;
}
#modalChatEmpresa .wa-rail-btn{
width:52px !important;height:52px !important;border-radius:18px !important;
background:rgba(255,255,255,.03) !important;
border:1px solid rgba(120,190,255,.12) !important;
color:#d8ecff !important;
box-shadow:0 0 20px rgba(0,140,255,.08) !important;
}
#modalChatEmpresa .wa-rail-btn.activo,#modalChatEmpresa .wa-rail-btn:hover{
background:linear-gradient(135deg,rgba(0,140,255,.35),rgba(0,255,255,.12)) !important;
box-shadow:0 0 25px rgba(0,140,255,.45) !important;
}
#modalChatEmpresa .chat-sidebar-pro,
#modalChatEmpresa .chat-sidebar-personas{
background:rgba(6,15,28,.88) !important;
backdrop-filter:blur(24px) !important;
border-right:1px solid rgba(80,180,255,.18) !important;
}
#modalChatEmpresa .chat-brand-wa{
background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(0,140,255,.08)) !important;
border-bottom:1px solid rgba(255,255,255,.08) !important;
}
#modalChatEmpresa .chat-brand-wa h3,
#modalChatEmpresa .chat-list-wa strong,
#modalChatEmpresa .chat-top-pro h3,
#modalChatEmpresa .chat-msg-head strong{
color:#f4fbff !important;
}
#modalChatEmpresa .chat-brand-wa p,
#modalChatEmpresa .chat-top-pro .nota,
#modalChatEmpresa .chat-list-wa span,
#modalChatEmpresa .chat-sidebar-pro .label-campo{
color:#8ca8c7 !important;
}
#modalChatEmpresa .chat-search-wa input,
#modalChatEmpresa .chat-sidebar-pro input,
#modalChatEmpresa .chat-sidebar-pro select,
#modalChatEmpresa .chat-composer-pro textarea{
background:rgba(255,255,255,.06) !important;
border:1px solid rgba(100,180,255,.18) !important;
color:#f4fbff !important;
box-shadow:inset 0 0 18px rgba(0,0,0,.35),0 0 20px rgba(0,140,255,.08) !important;
}
#modalChatEmpresa .chat-panel-pro{
background:radial-gradient(circle at center,rgba(20,80,160,.16),rgba(4,10,20,.96)) !important;
}
#modalChatEmpresa .chat-top-pro{
background:rgba(5,12,24,.92) !important;
border-bottom:1px solid rgba(80,180,255,.18) !important;
backdrop-filter:blur(18px) !important;
}
#modalChatEmpresa .chat-mensajes-pro{
background:radial-gradient(circle at center,rgba(0,120,255,.12),rgba(2,8,18,.96)) !important;
}
#modalChatEmpresa .chat-burbuja{
background:rgba(9,20,38,.9) !important;
border:1px solid rgba(110,190,255,.15) !important;
box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 20px rgba(0,140,255,.08) !important;
color:#eaf6ff !important;
border-radius:18px !important;
padding:14px !important;
}
#modalChatEmpresa .chat-propio .chat-burbuja{
background:linear-gradient(135deg,rgba(0,120,255,.45),rgba(0,40,120,.92)) !important;
}
#modalChatEmpresa .chat-burbuja p,
#modalChatEmpresa .chat-msg-head small{
color:#d6e7ff !important;
}
#modalChatEmpresa .chat-composer-pro{
background:rgba(5,12,24,.96) !important;
padding:14px 16px !important;
height:86px !important;
border-top:1px solid rgba(80,180,255,.18) !important;
}
#modalChatEmpresa #btnEnviarChat{
height:56px !important;
min-width:56px !important;
border-radius:18px !important;
background:linear-gradient(135deg,#3ba3ff,#635bff) !important;
box-shadow:0 0 30px rgba(59,163,255,.55) !important;
}
#modalChatEmpresa ::-webkit-scrollbar{width:10px;height:10px;}
#modalChatEmpresa ::-webkit-scrollbar-thumb{
background:linear-gradient(180deg,#1d7fff,#61d9ff) !important;
border-radius:999px;
}

/* =========================================================
   CHAT EMPRESARIAL ULTRA PREMIUM - AJUSTE FINAL MOCKUP FOTO
   ========================================================= */
#modalChatEmpresa.modal{
  position:fixed!important; inset:0!important; z-index:99999!important; padding:0!important;
  background:#020712!important; overflow:hidden!important; color:#eef7ff!important;
}
#modalChatEmpresa .modal-contenido.modal-chat-empresa,#modalChatEmpresa .modal-chat-empresa{
  width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#020712!important;overflow:hidden!important;display:block!important;color:#eef7ff!important;
}
#modalChatEmpresa .modal-header-pro{display:block!important;height:0!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;overflow:visible!important;position:relative!important;z-index:80!important}
#modalChatEmpresa .modal-header-pro>div{display:none!important}
#modalChatEmpresa #cerrarChatEmpresa{position:fixed!important;top:18px!important;right:20px!important;z-index:100000!important;border:1px solid rgba(125,190,255,.45)!important;background:linear-gradient(135deg,#8ec5ff,#6966ff)!important;color:#fff!important;border-radius:24px!important;padding:10px 20px!important;font-weight:900!important;box-shadow:0 0 24px rgba(68,151,255,.55)!important}
#modalChatEmpresa .chat-central-premium-final,#modalChatEmpresa .chat-layout-pro.chat-central-premium-final{
  width:100vw!important;height:100vh!important;box-sizing:border-box!important;padding:8px!important;display:grid!important;
  grid-template-columns:150px 230px minmax(420px,1fr) 320px!important;
  grid-template-rows:74px minmax(0,1fr) 42px!important;gap:8px!important;overflow:hidden!important;
  background:
    radial-gradient(circle at 52% 8%,rgba(118,202,255,.27),transparent 22%),
    radial-gradient(circle at 88% 82%,rgba(255,155,72,.10),transparent 34%),
    linear-gradient(135deg,#020712 0%,#07111d 45%,#020611 100%)!important;
}
#modalChatEmpresa .chat-central-premium-final:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:64px 64px;opacity:.18;animation:esmHudMove 22s linear infinite;z-index:0}
@keyframes esmHudMove{from{background-position:0 0}to{background-position:128px 128px}}
#modalChatEmpresa .chat-oper-header{grid-column:1/5;grid-row:1;position:relative;z-index:2;display:flex!important;align-items:center!important;justify-content:space-between!important;border:1px solid rgba(150,205,255,.28)!important;border-radius:18px!important;background:linear-gradient(180deg,rgba(25,39,55,.92),rgba(5,13,24,.78))!important;box-shadow:inset 0 1px rgba(255,255,255,.22),0 0 34px rgba(59,153,255,.22)!important;padding:8px 18px!important;overflow:hidden!important}
#modalChatEmpresa .chat-oper-header:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.18),transparent 28%,transparent 70%,rgba(103,181,255,.16));pointer-events:none}
#modalChatEmpresa .chat-oper-brand{display:flex;align-items:center;gap:12px;min-width:360px;position:relative;z-index:1}
#modalChatEmpresa .chat-logo-empresa-principal{display:block!important;width:54px!important;height:54px!important;border-radius:15px!important;object-fit:cover!important;border:1px solid rgba(180,220,255,.45)!important;box-shadow:0 0 18px rgba(90,170,255,.35)!important;background:rgba(255,255,255,.08)!important}
#modalChatEmpresa .chat-oper-brand span{display:block;font-size:12px;letter-spacing:1.3px;color:#cce6ff;font-weight:800;text-transform:uppercase}
#modalChatEmpresa .chat-oper-brand h1{margin:0!important;color:#fff!important;font-size:30px!important;line-height:1;text-shadow:0 0 16px rgba(144,205,255,.55)}
#modalChatEmpresa .chat-oper-badge{position:relative;z-index:1;color:#00f6ff;font-weight:900;font-size:13px;border:1px solid rgba(0,220,255,.25);border-radius:8px;padding:12px 28px;background:rgba(2,12,24,.7);box-shadow:inset 0 0 18px rgba(0,183,255,.10)}
#modalChatEmpresa .chat-oper-actions{display:flex;align-items:center;gap:12px;position:relative;z-index:1;min-width:420px;justify-content:flex-end;margin-right:112px}
#modalChatEmpresa .chat-round-btn,#modalChatEmpresa .chat-top-icons button{width:46px;height:46px;border-radius:18px;border:1px solid rgba(150,205,255,.25);background:linear-gradient(145deg,rgba(30,44,63,.88),rgba(6,15,28,.85));color:#dff3ff;font-weight:900;box-shadow:inset 0 0 10px rgba(255,255,255,.06),0 0 18px rgba(57,144,255,.24)}
#modalChatEmpresa .chat-oper-search{height:46px;min-width:260px;border-radius:12px;border:1px solid rgba(150,205,255,.22);background:rgba(3,10,20,.55);display:flex;align-items:center;gap:8px;padding:0 14px;color:#bcd2e6}
#modalChatEmpresa .chat-oper-search input{background:transparent;border:0;outline:0;color:#eef7ff;width:100%;font-weight:700}
#modalChatEmpresa .chat-oper-user{display:flex;align-items:center;gap:10px;color:#fff;min-width:170px}
#modalChatEmpresa .chat-user-avatar-small{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#bcd1ff,#7765ff);font-weight:900;box-shadow:0 0 18px rgba(87,155,255,.4)}
#modalChatEmpresa .chat-oper-user small{display:block;color:#b9c8d9;font-size:12px}
#modalChatEmpresa .chat-rail-wa{grid-column:1;grid-row:2;position:relative;z-index:2;height:auto!important;padding:12px!important;border-radius:14px!important;display:flex!important;flex-direction:column!important;gap:10px!important;background:linear-gradient(180deg,rgba(15,27,42,.92),rgba(4,12,22,.92))!important;border:1px solid rgba(140,195,255,.22)!important;box-shadow:inset 0 0 24px rgba(255,255,255,.04)!important;overflow:hidden!important}
#modalChatEmpresa .wa-rail-btn{width:100%!important;height:58px!important;border-radius:12px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;padding:0 12px!important;border:1px solid transparent!important;background:transparent!important;color:#d7e7f8!important;font-size:20px!important;position:relative!important;font-weight:900!important}
#modalChatEmpresa .wa-rail-btn span{display:inline!important;font-size:12px!important;letter-spacing:.3px;color:#dcecff!important}
#modalChatEmpresa .wa-rail-btn b{position:absolute;right:6px;top:5px;background:#ff2c48;color:#fff;border-radius:50%;font-size:11px;width:20px;height:20px;display:grid;place-items:center;box-shadow:0 0 14px rgba(255,44,72,.8)}
#modalChatEmpresa .wa-rail-btn.activo,#modalChatEmpresa .wa-rail-btn:hover{background:linear-gradient(135deg,rgba(12,146,255,.42),rgba(80,35,210,.35))!important;border-color:rgba(56,189,248,.7)!important;box-shadow:0 0 20px rgba(0,145,255,.55),inset 0 0 18px rgba(255,255,255,.08)!important}
#modalChatEmpresa .chat-system-status{margin-top:auto;border:1px solid rgba(120,180,255,.18);border-radius:12px;padding:12px;background:rgba(0,0,0,.22);color:#31ff76;font-size:11px}.chat-system-status small{display:block;color:#e5f3ff;font-weight:800}.chat-system-status strong{font-size:12px}
#modalChatEmpresa .chat-themes-panel{grid-column:2;grid-row:2;position:relative;z-index:2;border-radius:14px;padding:16px 12px;background:linear-gradient(180deg,rgba(12,24,38,.86),rgba(4,11,20,.82));border:1px solid rgba(150,205,255,.22);box-shadow:inset 0 0 24px rgba(255,255,255,.035);overflow-y:auto!important;min-height:0!important}
#modalChatEmpresa .themes-title h2{margin:0;color:#fff;font-size:18px}.themes-title span{font-size:12px;color:#b8c8d9}
#modalChatEmpresa .theme-card{width:100%;min-height:74px;margin:10px 0 0;padding:8px 10px 8px 72px;border-radius:12px;border:1px solid rgba(150,205,255,.20);background:rgba(255,255,255,.035);position:relative;text-align:left;color:#fff;display:block;cursor:pointer;box-shadow:inset 0 0 12px rgba(255,255,255,.025);transition:.18s ease}
#modalChatEmpresa .theme-card:hover,#modalChatEmpresa .theme-card.activo{border-color:#159bff;background:linear-gradient(135deg,rgba(20,160,255,.28),rgba(30,60,100,.18));box-shadow:0 0 22px rgba(0,145,255,.55),inset 0 0 16px rgba(255,255,255,.06)}
#modalChatEmpresa .theme-card strong{display:block;font-size:13px}#modalChatEmpresa .theme-card small{display:block;font-size:11px;color:#c5d4e2;margin-top:4px}.theme-thumb{position:absolute;left:8px;top:8px;width:56px;height:56px;border-radius:10px;border:1px solid rgba(255,255,255,.24);box-shadow:inset 0 0 18px rgba(255,255,255,.16),0 0 18px rgba(0,145,255,.25)}
.theme-thumb.titanio,.theme-thumb.glass{background:linear-gradient(135deg,#e5f6ff,#4c6175)}.theme-thumb.carbono{background:repeating-linear-gradient(45deg,#0e1620 0 4px,#273647 4px 8px)}.theme-thumb.azul{background:radial-gradient(circle,#00c8ff,#0731d1 55%,#03103a)}.theme-thumb.verde,.theme-thumb.hud{background:radial-gradient(circle,#17ff85,#06391d 55%,#020b06)}.theme-thumb.dorado{background:radial-gradient(circle,#ffe1a3,#a66d17 55%,#221405)}.theme-thumb.matrix{background:repeating-linear-gradient(90deg,#00ff64 0 2px,#03220f 2px 9px)}
#modalChatEmpresa .theme-more{width:100%;margin-top:12px;border-radius:10px;border:1px solid rgba(130,75,255,.6);background:linear-gradient(135deg,rgba(80,40,200,.34),rgba(25,60,140,.28));color:#d9d4ff;height:40px;font-weight:900;box-shadow:0 0 18px rgba(105,70,255,.35)}
#modalChatEmpresa .chat-panel-pro{grid-column:3;grid-row:2;position:relative!important;z-index:2;height:auto!important;min-height:0!important;display:grid!important;grid-template-rows:84px 62px minmax(0,1fr) 86px!important;gap:0!important;border-radius:14px!important;border:1px solid rgba(150,205,255,.28)!important;background:rgba(5,14,27,.58)!important;overflow:hidden!important;box-shadow:inset 0 0 42px rgba(95,170,255,.05),0 0 24px rgba(0,0,0,.28)!important}
#modalChatEmpresa .chat-panel-pro:before{content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;background:radial-gradient(circle at 50% 5%,rgba(73,172,255,.22),transparent 32%),radial-gradient(circle at 75% 78%,rgba(255,184,91,.08),transparent 32%),linear-gradient(135deg,rgba(2,9,17,.92),rgba(4,17,31,.80))!important;filter:none!important;opacity:1!important;pointer-events:none!important}
#modalChatEmpresa .chat-top-pro{padding:14px 18px!important;margin:0!important;background:rgba(5,16,30,.45)!important;border:0!important;border-bottom:1px solid rgba(150,205,255,.18)!important;display:flex!important;align-items:center!important;gap:14px!important;color:#fff!important}.chat-top-pro h3{font-size:26px!important;color:#fff!important;margin:0!important}.chat-top-pro p{color:#00ff82!important;margin:3px 0 0!important}.chat-top-icons{margin-left:auto;display:flex;gap:12px}
#modalChatEmpresa .chat-avatar-canal{width:54px!important;height:54px!important;border-radius:50%!important;background:linear-gradient(135deg,#48c6ff,#2c57e8)!important;color:#fff!important;font-size:20px!important;font-weight:900!important;display:grid!important;place-items:center!important;box-shadow:0 0 22px rgba(0,145,255,.65)!important;border:1px solid rgba(210,235,255,.4)!important}
#modalChatEmpresa .chat-pinned{display:flex!important;align-items:center!important;gap:12px;margin:10px 14px!important;padding:12px 16px!important;border-radius:10px!important;border:1px solid rgba(150,205,255,.28)!important;background:linear-gradient(180deg,rgba(32,52,72,.72),rgba(13,26,43,.62))!important;color:#eaf6ff!important;box-shadow:inset 0 0 18px rgba(255,255,255,.035)!important}.chat-pinned strong{display:block;color:#8bd2ff}.chat-pinned span{font-size:12px;color:#fff}
#modalChatEmpresa .chat-mensajes-pro{height:100%!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;padding:22px 36px!important;border:0!important;border-radius:0!important;background:transparent!important;color:#fff!important}
#modalChatEmpresa .chat-composer-pro{margin:10px!important;padding:10px!important;border:1px solid #147cff!important;border-radius:14px!important;background:linear-gradient(180deg,rgba(12,26,44,.9),rgba(4,12,24,.9))!important;box-shadow:0 0 24px rgba(0,119,255,.58),inset 0 0 22px rgba(255,255,255,.035)!important;display:grid!important;grid-template-columns:46px 46px minmax(0,1fr) 62px!important;align-items:center!important;gap:10px!important}
#modalChatEmpresa .btn-chat-icon{width:46px!important;height:46px!important;border-radius:14px!important;display:grid!important;place-items:center!important;border:0!important;background:rgba(255,255,255,.04)!important;color:#dcecff!important;font-size:24px!important;cursor:pointer!important}
#modalChatEmpresa .chat-textarea-wa{height:48px!important;min-height:48px!important;max-height:70px!important;resize:none!important;border-radius:12px!important;border:1px solid rgba(150,205,255,.18)!important;background:rgba(2,8,18,.42)!important;color:#eaf6ff!important;padding:14px 18px!important;font-size:16px!important;outline:none!important}.chat-textarea-wa::placeholder{color:#7e95ad!important}
#modalChatEmpresa #btnEnviarChat{width:62px!important;height:54px!important;min-width:0!important;border-radius:16px!important;border:1px solid rgba(160,210,255,.45)!important;background:linear-gradient(135deg,#00b7ff,#604dff)!important;color:#fff!important;font-size:25px!important;padding:0!important;box-shadow:0 0 24px rgba(0,136,255,.7)!important;text-indent:0!important;overflow:hidden!important}
#modalChatEmpresa .chat-right-panel{grid-column:4;grid-row:2;position:relative;z-index:2;display:grid;grid-template-rows:minmax(315px,1.1fr) auto minmax(190px,.7fr);gap:10px;min-height:0;overflow:hidden}
#modalChatEmpresa .right-card{border-radius:14px;border:1px solid rgba(150,205,255,.26);background:linear-gradient(180deg,rgba(13,25,41,.88),rgba(4,11,21,.84));box-shadow:inset 0 0 24px rgba(255,255,255,.035);padding:14px;min-height:0;overflow:hidden;color:#eef7ff!important}.right-card h3{margin:0 0 12px;color:#fff;font-size:16px;letter-spacing:.5px}.right-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.right-title span{background:#116bff;color:#fff;border-radius:8px;padding:5px 10px;font-size:12px;font-weight:900;box-shadow:0 0 14px rgba(0,119,255,.5)}
#modalChatEmpresa .users-online-card{display:grid;grid-template-rows:auto 48px minmax(0,1fr) 36px;gap:10px}.users-online-card .chat-search-wa{height:44px;border-radius:10px;border:1px solid rgba(150,205,255,.20);background:rgba(255,255,255,.05);display:flex;align-items:center;gap:8px;padding:0 10px}.users-online-card .chat-search-wa input{background:transparent!important;border:0!important;color:#fff!important;outline:0!important;width:100%}
#modalChatEmpresa .lista-personas-chat-wa{overflow-y:auto!important;min-height:0!important;max-height:none!important;padding-right:6px!important;display:flex!important;flex-direction:column!important;gap:8px!important}.lista-personas-chat-wa::-webkit-scrollbar,.chat-themes-panel::-webkit-scrollbar,.chat-mensajes-pro::-webkit-scrollbar{width:7px}.lista-personas-chat-wa::-webkit-scrollbar-thumb,.chat-themes-panel::-webkit-scrollbar-thumb,.chat-mensajes-pro::-webkit-scrollbar-thumb{background:linear-gradient(#12ccff,#186dff);border-radius:999px;box-shadow:0 0 12px rgba(0,145,255,.55)}
#modalChatEmpresa .chat-persona-item{width:100%!important;border:0!important;border-radius:10px!important;padding:9px 8px!important;display:grid!important;grid-template-columns:42px minmax(0,1fr) auto!important;gap:10px!important;align-items:center!important;background:transparent!important;color:#fff!important;text-align:left!important}.chat-persona-item.activo,.chat-persona-item:hover{background:linear-gradient(90deg,rgba(22,118,255,.32),rgba(15,34,58,.18))!important}.chat-persona-foto{width:42px!important;height:42px!important;border-radius:50%!important;object-fit:cover!important;display:grid!important;place-items:center!important;background:linear-gradient(135deg,#1ab7ff,#5b42dc)!important;color:#fff!important;font-weight:900!important}.chat-persona-info strong{display:block;color:#fff!important;font-size:14px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-persona-info span{display:block;color:#a9c0d7!important;font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-persona-item small{color:#22ff73!important;font-size:18px!important}
#modalChatEmpresa .ver-todos-chat{border:0;background:transparent;color:#d9eaff;font-weight:800}.active-room{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid rgba(75,166,255,.35);border-radius:12px;background:linear-gradient(90deg,rgba(0,132,255,.42),rgba(30,48,72,.42));box-shadow:0 0 20px rgba(0,119,255,.28)}.active-room strong{display:block;color:#73d6ff}.active-room span{display:block;color:#b8c8d9;font-size:12px}.actividad-card p{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);padding:9px 0;margin:0;color:#cddbeb}.actividad-card strong{color:#9fd6ff}
#modalChatEmpresa .chat-msg{margin:12px 0!important}.chat-burbuja{background:linear-gradient(180deg,rgba(20,40,62,.88),rgba(9,23,40,.84))!important;border:1px solid rgba(83,167,255,.26)!important;color:#fff!important;border-radius:14px!important;box-shadow:0 12px 24px rgba(0,0,0,.22),inset 0 0 18px rgba(255,255,255,.04)!important}.chat-propio .chat-burbuja{background:linear-gradient(135deg,rgba(0,86,155,.72),rgba(5,35,70,.88))!important;border-color:rgba(0,145,255,.62)!important;color:#fff!important}.chat-msg-head strong{color:#54d7ff!important}.chat-msg-head small{color:#9db4c9!important}
#modalChatEmpresa:has(.chat-tema-tactico),#modalChatEmpresa.chat-tema-tactico{--chat-accent:#14ff75}.chat-tema-tactico .chat-panel-pro,.chat-tema-tactico .right-card,.chat-tema-tactico .chat-themes-panel{border-color:rgba(20,255,117,.32)!important}.chat-tema-tactico #btnEnviarChat,.chat-tema-tactico .wa-rail-btn.activo{background:linear-gradient(135deg,#00e676,#095c35)!important;box-shadow:0 0 24px rgba(0,230,118,.48)!important}.chat-tema-dorado #btnEnviarChat,.chat-tema-dorado .wa-rail-btn.activo{background:linear-gradient(135deg,#f7c66a,#6b430d)!important;box-shadow:0 0 24px rgba(247,198,106,.44)!important}.chat-tema-dorado .chat-panel-pro,.chat-tema-dorado .right-card,.chat-tema-dorado .chat-themes-panel{border-color:rgba(247,198,106,.34)!important}.chat-tema-carbono .theme-card.activo{border-color:#7d8da0!important;box-shadow:0 0 18px rgba(180,210,255,.25)!important}
#modalChatEmpresa .oculto{display:none!important}
#modalChatEmpresa .chat-logo-sistema-mini,#modalChatEmpresa .chat-brand-wa,#modalChatEmpresa .chat-personalizador-pro,#modalChatEmpresa .chat-tabs-wa,#modalChatEmpresa .chat-list-header-wa{display:none!important}
@media(max-width:1100px){#modalChatEmpresa .chat-central-premium-final{grid-template-columns:72px 210px minmax(360px,1fr) 260px!important}.wa-rail-btn span,.chat-system-status{display:none!important}#modalChatEmpresa .wa-rail-btn{justify-content:center!important;padding:0!important}.chat-oper-actions{min-width:auto!important}.chat-oper-search{display:none!important}}

/* =========================================================
   CORRECCION REAL FOTO MOCKUP - CHAT CENTRAL OPERATIVA
   Ajuste final: columnas, proporciones, panel derecho y barra izquierda
   ========================================================= */
html:has(#modalChatEmpresa:not(.oculto)),
body:has(#modalChatEmpresa:not(.oculto)){
  overflow:hidden!important;
  width:100%!important;
  height:100%!important;
}
#modalChatEmpresa:not(.oculto){
  display:block!important;
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  background:#020711!important;
}
#modalChatEmpresa .modal-contenido.modal-grande.modal-chat-empresa{
  width:100vw!important;
  height:100vh!important;
  max-width:100vw!important;
  max-height:100vh!important;
  overflow:hidden!important;
  padding:0!important;
  margin:0!important;
  border-radius:0!important;
  background:#020711!important;
}
#modalChatEmpresa .modal-header-pro{
  display:block!important;
  height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  overflow:visible!important;
}
#modalChatEmpresa .modal-header-pro > div{display:none!important;}
#modalChatEmpresa #cerrarChatEmpresa{
  position:fixed!important;
  top:23px!important;
  right:18px!important;
  z-index:100002!important;
  height:42px!important;
  min-width:92px!important;
  padding:0 18px!important;
  border-radius:26px!important;
  border:1px solid rgba(200,230,255,.45)!important;
  background:linear-gradient(135deg,#a9d7ff,#5b7dff)!important;
  box-shadow:0 0 24px rgba(74,160,255,.55)!important;
  font-size:13px!important;
  font-weight:900!important;
}
#modalChatEmpresa .chat-layout-pro.chat-central-premium-final{
  position:relative!important;
  width:100vw!important;
  height:100vh!important;
  max-height:100vh!important;
  box-sizing:border-box!important;
  padding:7px!important;
  display:grid!important;
  grid-template-columns:150px 240px minmax(0,1fr) 330px!important;
  grid-template-rows:72px minmax(0,1fr) 42px!important;
  gap:8px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 50% 5%,rgba(96,194,255,.28),transparent 23%),
    radial-gradient(circle at 72% 70%,rgba(255,161,68,.08),transparent 34%),
    linear-gradient(135deg,#020711 0%,#071120 48%,#020711 100%)!important;
}
#modalChatEmpresa .chat-oper-header{
  grid-column:1/5!important;
  grid-row:1!important;
  height:auto!important;
  min-height:0!important;
  padding:8px 128px 8px 12px!important;
  border-radius:18px!important;
}
#modalChatEmpresa .chat-oper-brand{min-width:390px!important;gap:12px!important;}
#modalChatEmpresa .chat-oper-brand span{font-size:14px!important;letter-spacing:1.2px!important;color:#d9edff!important;}
#modalChatEmpresa .chat-oper-brand h1{font-size:31px!important;line-height:1!important;color:#fff!important;text-shadow:0 0 14px rgba(170,210,255,.55)!important;}
#modalChatEmpresa .chat-oper-actions{gap:12px!important;min-width:470px!important;justify-content:flex-end!important;}
#modalChatEmpresa .chat-oper-search{width:240px!important;height:44px!important;border-radius:13px!important;}
#modalChatEmpresa .chat-oper-user{height:48px!important;min-width:170px!important;}
#modalChatEmpresa .chat-rail-wa{
  grid-column:1!important;
  grid-row:2!important;
  width:150px!important;
  min-width:150px!important;
  height:100%!important;
  padding:10px 10px!important;
  border-radius:14px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:6px!important;
  overflow:hidden!important;
}
#modalChatEmpresa .wa-rail-btn{
  width:100%!important;
  height:54px!important;
  min-height:54px!important;
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  align-items:center!important;
  justify-content:start!important;
  gap:9px!important;
  padding:0 10px!important;
  border-radius:12px!important;
  font-size:22px!important;
  text-align:left!important;
  overflow:hidden!important;
}
#modalChatEmpresa .wa-rail-btn span{
  display:block!important;
  color:#dcecff!important;
  font-size:12px!important;
  font-weight:900!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#modalChatEmpresa .wa-rail-btn b{position:absolute!important;right:9px!important;top:7px!important;}
#modalChatEmpresa .chat-system-status{
  margin-top:auto!important;
  display:block!important;
  border-radius:10px!important;
  padding:10px 8px!important;
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(150,205,255,.17)!important;
}
#modalChatEmpresa .chat-system-status small{font-size:9px!important;color:#e7f5ff!important;}
#modalChatEmpresa .chat-system-status strong{font-size:11px!important;color:#25ff79!important;}
#modalChatEmpresa .chat-themes-panel{
  grid-column:2!important;
  grid-row:2!important;
  width:240px!important;
  min-width:240px!important;
  height:100%!important;
  padding:18px 12px!important;
  border-radius:14px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
#modalChatEmpresa .themes-title h2{font-size:20px!important;margin:0!important;}
#modalChatEmpresa .themes-title span{font-size:12px!important;}
#modalChatEmpresa .theme-card{
  height:75px!important;
  min-height:75px!important;
  grid-template-columns:60px 1fr 18px!important;
  padding:8px!important;
  margin-bottom:8px!important;
  border-radius:12px!important;
}
#modalChatEmpresa .theme-thumb{width:58px!important;height:58px!important;border-radius:10px!important;}
#modalChatEmpresa .theme-card strong{font-size:14px!important;}
#modalChatEmpresa .theme-card small{font-size:11px!important;}
#modalChatEmpresa .chat-panel-pro{
  grid-column:3!important;
  grid-row:2!important;
  min-width:0!important;
  height:100%!important;
  display:grid!important;
  grid-template-rows:78px 62px minmax(0,1fr) 86px!important;
  border-radius:14px!important;
  overflow:hidden!important;
}
#modalChatEmpresa .chat-top-pro{height:78px!important;padding:12px 16px!important;}
#modalChatEmpresa .chat-top-pro h3{font-size:27px!important;line-height:1!important;}
#modalChatEmpresa .chat-top-pro .nota{font-size:13px!important;}
#modalChatEmpresa .chat-top-icons button{width:48px!important;height:48px!important;border-radius:16px!important;font-size:22px!important;}
#modalChatEmpresa .chat-pinned{height:auto!important;margin:10px 14px!important;padding:11px 14px!important;}
#modalChatEmpresa .chat-mensajes-pro{
  min-height:0!important;
  height:auto!important;
  padding:22px 28px!important;
  overflow-y:auto!important;
}
#modalChatEmpresa .chat-mensajes-pro > .nota{
  min-height:180px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:rgba(220,238,255,.55)!important;
}
#modalChatEmpresa .chat-composer-pro{
  height:66px!important;
  min-height:66px!important;
  margin:10px 12px!important;
  padding:8px 10px!important;
  grid-template-columns:44px 44px minmax(0,1fr) 58px!important;
}
#modalChatEmpresa .chat-textarea-wa{
  height:46px!important;
  min-height:46px!important;
  max-height:46px!important;
  font-size:16px!important;
  padding:13px 18px!important;
}
#modalChatEmpresa .btn-chat-icon{width:44px!important;height:44px!important;font-size:23px!important;}
#modalChatEmpresa #btnEnviarChat{width:58px!important;height:50px!important;font-size:24px!important;}
#modalChatEmpresa .chat-right-panel{
  grid-column:4!important;
  grid-row:2!important;
  width:330px!important;
  min-width:330px!important;
  height:100%!important;
  display:grid!important;
  grid-template-rows:minmax(360px,1fr) 118px 210px!important;
  gap:8px!important;
  overflow:hidden!important;
}
#modalChatEmpresa .right-card{padding:13px!important;border-radius:14px!important;overflow:hidden!important;min-height:0!important;}
#modalChatEmpresa .right-title h3,#modalChatEmpresa .right-card h3{font-size:16px!important;line-height:1!important;}
#modalChatEmpresa .right-title span{font-size:12px!important;padding:6px 10px!important;white-space:nowrap!important;}
#modalChatEmpresa .users-online-card{
  display:grid!important;
  grid-template-rows:32px 48px minmax(0,1fr) 38px!important;
  gap:10px!important;
}
#modalChatEmpresa .lista-personas-chat-wa{
  height:100%!important;
  min-height:0!important;
  overflow-y:auto!important;
  padding-right:6px!important;
}
#modalChatEmpresa .chat-persona-item{min-height:56px!important;padding:7px 8px!important;}
#modalChatEmpresa .chat-persona-foto{width:44px!important;height:44px!important;}
#modalChatEmpresa .sala-activa-card{display:block!important;}
#modalChatEmpresa .sala-activa-card .active-room{height:62px!important;padding:10px!important;}
#modalChatEmpresa .actividad-card{display:block!important;}
#modalChatEmpresa .actividad-card p{font-size:13px!important;padding:8px 0!important;}
#modalChatEmpresa .chat-oper-footer,
#modalChatEmpresa .chat-central-premium-final > footer{grid-column:1/5!important;grid-row:3!important;}
#modalChatEmpresa .chat-layout-pro.chat-central-premium-final::after{
  content:'Software ESM Premium v2.0.0    |    Todos los derechos reservados © 2024                                                  🛡 Conexión segura establecida    ▂▄▆█';
  grid-column:1/5!important;
  grid-row:3!important;
  display:flex!important;
  align-items:center!important;
  padding:0 28px!important;
  border:1px solid rgba(150,205,255,.20)!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,rgba(16,28,42,.82),rgba(4,10,19,.88))!important;
  color:#bdd4ea!important;
  font-size:12px!important;
  white-space:pre!important;
  overflow:hidden!important;
  box-shadow:inset 0 1px rgba(255,255,255,.10)!important;
  z-index:2!important;
}
@media(max-width:1180px){
  #modalChatEmpresa .chat-layout-pro.chat-central-premium-final{
    grid-template-columns:138px 220px minmax(0,1fr) 300px!important;
    gap:7px!important;
  }
  #modalChatEmpresa .chat-rail-wa{width:138px!important;min-width:138px!important;}
  #modalChatEmpresa .chat-themes-panel{width:220px!important;min-width:220px!important;}
  #modalChatEmpresa .chat-right-panel{width:300px!important;min-width:300px!important;grid-template-rows:minmax(330px,1fr) 108px 190px!important;}
  #modalChatEmpresa .chat-oper-search{width:190px!important;}
  #modalChatEmpresa .chat-oper-actions{min-width:390px!important;}
  #modalChatEmpresa .chat-oper-brand{min-width:330px!important;}
  #modalChatEmpresa .chat-oper-brand h1{font-size:28px!important;}
}
@media(max-height:700px){
  #modalChatEmpresa .chat-layout-pro.chat-central-premium-final{grid-template-rows:62px minmax(0,1fr) 34px!important;padding:5px!important;gap:6px!important;}
  #modalChatEmpresa .chat-oper-header{padding-top:5px!important;padding-bottom:5px!important;border-radius:14px!important;}
  #modalChatEmpresa .chat-logo-empresa-principal{width:46px!important;height:46px!important;}
  #modalChatEmpresa .chat-oper-brand h1{font-size:25px!important;}
  #modalChatEmpresa .wa-rail-btn{height:47px!important;min-height:47px!important;}
  #modalChatEmpresa .theme-card{height:66px!important;min-height:66px!important;}
  #modalChatEmpresa .theme-thumb{width:50px!important;height:50px!important;}
  #modalChatEmpresa .chat-panel-pro{grid-template-rows:66px 54px minmax(0,1fr) 74px!important;}
  #modalChatEmpresa .chat-top-pro{height:66px!important;}
  #modalChatEmpresa .chat-avatar-canal{width:48px!important;height:48px!important;}
  #modalChatEmpresa .chat-top-pro h3{font-size:23px!important;}
  #modalChatEmpresa .chat-top-icons button{width:42px!important;height:42px!important;}
  #modalChatEmpresa .chat-pinned{margin:7px 11px!important;padding:8px 11px!important;}
  #modalChatEmpresa .chat-composer-pro{height:56px!important;min-height:56px!important;margin:7px 10px!important;}
  #modalChatEmpresa .chat-textarea-wa{height:40px!important;min-height:40px!important;max-height:40px!important;padding:10px 15px!important;}
  #modalChatEmpresa .btn-chat-icon{width:40px!important;height:40px!important;font-size:20px!important;}
  #modalChatEmpresa #btnEnviarChat{width:52px!important;height:44px!important;}
  #modalChatEmpresa .chat-right-panel{grid-template-rows:minmax(250px,1fr) 92px 150px!important;}
  #modalChatEmpresa .actividad-card p{padding:5px 0!important;font-size:12px!important;}
  #modalChatEmpresa #cerrarChatEmpresa{top:14px!important;height:36px!important;}
}

/* === FIX CHAT EMPRESARIAL 06-05: layout real, escritura visible, datos reales === */
#modalChatEmpresa .chat-layout-pro.chat-central-premium-final{
  grid-template-columns: 132px 254px minmax(430px,1fr) 310px !important;
  grid-template-rows: 58px minmax(0,1fr) 28px !important;
  gap: 6px !important;
  padding: 5px !important;
  height: calc(100vh - 22px) !important;
  max-height: calc(100vh - 22px) !important;
  overflow: hidden !important;
  background: radial-gradient(circle at 50% 20%, rgba(8,92,185,.34), transparent 42%), linear-gradient(135deg,#061426 0%,#071b38 48%,#050d1c 100%) !important;
}
#modalChatEmpresa .chat-layout-pro.chat-central-premium-final::before{ z-index:0 !important; pointer-events:none !important; }
#modalChatEmpresa .chat-layout-pro.chat-central-premium-final::after{
  content:'Software ESM Premium v2.0.0   |   Todos los derechos reservados © 2024                                      🛡 Conexión segura establecida' !important;
  grid-column:1/5 !important;
  grid-row:3 !important;
  height:28px !important;
  min-height:28px !important;
  border-radius:8px !important;
  padding:0 18px !important;
  background:linear-gradient(180deg,rgba(8,18,32,.78),rgba(3,8,18,.92)) !important;
  box-shadow:none !important;
  color:#c5daf0 !important;
  font-size:11px !important;
  z-index:3 !important;
}
#modalChatEmpresa .chat-oper-header{
  grid-column:1/5 !important;
  grid-row:1 !important;
  min-height:58px !important;
  height:58px !important;
  padding:6px 10px !important;
  border-radius:12px !important;
  position:relative !important;
  z-index:2 !important;
}
#modalChatEmpresa .chat-oper-brand{ min-width:270px !important; gap:8px !important; }
#modalChatEmpresa .chat-oper-brand span{font-size:11px !important; letter-spacing:.8px !important;}
#modalChatEmpresa .chat-oper-brand h1{font-size:25px !important; line-height:1 !important;}
#modalChatEmpresa .chat-logo-empresa-principal{width:42px !important;height:42px !important;}
#modalChatEmpresa .chat-oper-badge{height:36px !important;padding:0 18px !important;font-size:12px !important;}
#modalChatEmpresa .chat-oper-actions{min-width:405px !important;gap:8px !important;}
#modalChatEmpresa .chat-oper-search{height:40px !important;width:220px !important;}
#modalChatEmpresa #cerrarChatEmpresa{height:38px !important;top:10px !important;right:12px !important;z-index:9 !important;}

#modalChatEmpresa .chat-rail-wa{
  grid-column:1 !important; grid-row:2 !important;
  width:132px !important; min-width:132px !important;
  padding:8px 6px !important; gap:6px !important; border-radius:12px !important;
  overflow:hidden !important; z-index:2 !important;
}
#modalChatEmpresa .wa-rail-btn{
  height:43px !important; min-height:43px !important; border-radius:10px !important;
  grid-template-columns:28px 1fr !important; gap:7px !important; padding:0 8px !important;
  font-size:19px !important;
}
#modalChatEmpresa .wa-rail-btn span{font-size:10.5px !important;letter-spacing:.2px !important;}
#modalChatEmpresa .chat-system-status{padding:7px !important;}

#modalChatEmpresa .chat-themes-panel{
  grid-column:2 !important; grid-row:2 !important;
  width:254px !important; min-width:254px !important;
  padding:12px 10px !important; border-radius:12px !important;
  z-index:2 !important; overflow-y:auto !important;
}
#modalChatEmpresa .themes-title h2{font-size:18px !important;}
#modalChatEmpresa .themes-title span{font-size:11px !important;}
#modalChatEmpresa .theme-card{
  height:57px !important; min-height:57px !important;
  grid-template-columns:48px minmax(0,1fr) 16px !important;
  padding:6px !important; margin-bottom:7px !important;
  background:linear-gradient(90deg,rgba(10,190,255,.88),rgba(21,212,255,.78)) !important;
  color:#fff !important;
}
#modalChatEmpresa .theme-card.activo{box-shadow:0 0 18px rgba(0,183,255,.62), inset 0 0 20px rgba(255,255,255,.10) !important;}
#modalChatEmpresa .theme-thumb{width:44px !important;height:44px !important;border-radius:9px !important;}
#modalChatEmpresa .theme-card strong{font-size:12px !important;line-height:1.05 !important;white-space:normal !important;}
#modalChatEmpresa .theme-card small{font-size:9px !important;}
#modalChatEmpresa .theme-more{height:36px !important; font-size:11px !important;}

#modalChatEmpresa .chat-panel-pro{
  grid-column:3 !important; grid-row:2 !important;
  height:100% !important; min-height:0 !important;
  display:grid !important;
  grid-template-rows:54px 48px minmax(0,1fr) 74px !important;
  position:relative !important; z-index:2 !important; overflow:hidden !important;
}
#modalChatEmpresa .chat-top-pro{height:54px !important; min-height:54px !important; padding:6px 12px !important; gap:10px !important;}
#modalChatEmpresa .chat-avatar-canal{width:42px !important;height:42px !important;font-size:16px !important;}
#modalChatEmpresa .chat-top-pro h3{font-size:22px !important; line-height:1 !important; margin:0 !important;}
#modalChatEmpresa .chat-top-pro .nota{font-size:11px !important;margin:2px 0 0 !important;}
#modalChatEmpresa .chat-top-icons button{width:40px !important;height:40px !important;border-radius:12px !important;font-size:18px !important;}
#modalChatEmpresa .chat-pinned{height:38px !important;margin:5px 10px !important;padding:6px 10px !important;font-size:12px !important;overflow:hidden !important;}
#modalChatEmpresa .chat-pinned strong{font-size:12px !important;}
#modalChatEmpresa .chat-pinned span{font-size:10.5px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;display:block !important;}
#modalChatEmpresa .chat-mensajes-pro{padding:12px 18px !important;min-height:0 !important;height:100% !important;overflow-y:auto !important;}
#modalChatEmpresa .chat-mensajes-pro > .nota{min-height:80px !important;font-size:13px !important;}
#modalChatEmpresa .chat-composer-pro{
  height:62px !important; min-height:62px !important;
  margin:6px 10px 8px !important; padding:7px 9px !important;
  display:grid !important; grid-template-columns:38px 38px minmax(0,1fr) 54px !important;
  gap:8px !important; border-radius:13px !important; z-index:5 !important;
}
#modalChatEmpresa .chat-textarea-wa{height:42px !important;min-height:42px !important;max-height:42px !important;padding:10px 14px !important;font-size:15px !important;line-height:20px !important;}
#modalChatEmpresa .btn-chat-icon{width:38px !important;height:38px !important;font-size:19px !important;}
#modalChatEmpresa #btnEnviarChat{width:54px !important;height:44px !important;font-size:22px !important;}

#modalChatEmpresa .chat-right-panel{
  grid-column:4 !important; grid-row:2 !important;
  width:310px !important; min-width:310px !important; height:100% !important;
  display:grid !important; grid-template-rows:minmax(220px,1fr) 92px 142px !important;
  gap:6px !important; z-index:2 !important; overflow:hidden !important;
}
#modalChatEmpresa .right-card{padding:10px !important;border-radius:12px !important;min-height:0 !important;overflow:hidden !important;}
#modalChatEmpresa .right-title h3,#modalChatEmpresa .right-card h3{font-size:14px !important;margin:0 !important;}
#modalChatEmpresa .right-title span{font-size:10px !important;padding:5px 8px !important;}
#modalChatEmpresa .users-online-card{grid-template-rows:26px 42px minmax(0,1fr) 34px !important;gap:7px !important;}
#modalChatEmpresa .chat-search-wa{height:40px !important;}
#modalChatEmpresa .lista-personas-chat-wa{overflow-y:auto !important;height:100% !important;min-height:0 !important;padding-right:6px !important;}
#modalChatEmpresa .chat-persona-item{min-height:50px !important;padding:6px 8px !important;border-radius:10px !important;}
#modalChatEmpresa .chat-persona-foto{width:38px !important;height:38px !important;}
#modalChatEmpresa .chat-persona-info strong{font-size:13px !important;}
#modalChatEmpresa .chat-persona-info span{font-size:10px !important;}
#modalChatEmpresa .ver-todos-chat{height:32px !important;border-radius:10px !important;}
#modalChatEmpresa .sala-activa-card{display:grid !important;grid-template-rows:20px minmax(0,1fr) !important;gap:6px !important;}
#modalChatEmpresa .sala-activa-card .active-room{height:auto !important;min-height:48px !important;padding:8px !important;border-radius:10px !important;align-items:center !important;}
#modalChatEmpresa .active-room strong{font-size:13px !important;}
#modalChatEmpresa .active-room span{font-size:10px !important;}
#modalChatEmpresa .actividad-card{display:block !important;}
#modalChatEmpresa .actividad-card p{font-size:11px !important;padding:5px 0 !important;margin:0 !important;display:flex !important;justify-content:space-between !important;border-bottom:1px solid rgba(180,220,255,.12) !important;}
#modalChatEmpresa .actividad-card strong{font-size:12px !important;color:#9fe5ff !important;}

@media(max-height:700px){
  #modalChatEmpresa .chat-layout-pro.chat-central-premium-final{grid-template-rows:52px minmax(0,1fr) 24px !important;}
  #modalChatEmpresa .chat-oper-header{height:52px !important;min-height:52px !important;}
  #modalChatEmpresa .chat-panel-pro{grid-template-rows:46px 36px minmax(0,1fr) 58px !important;}
  #modalChatEmpresa .chat-top-pro{height:46px !important;min-height:46px !important;}
  #modalChatEmpresa .chat-top-pro h3{font-size:19px !important;}
  #modalChatEmpresa .chat-pinned{height:30px !important;margin:4px 8px !important;padding:4px 8px !important;}
  #modalChatEmpresa .chat-composer-pro{height:50px !important;min-height:50px !important;margin:4px 8px !important;padding:5px 7px !important;grid-template-columns:34px 34px minmax(0,1fr) 48px !important;}
  #modalChatEmpresa .chat-textarea-wa{height:36px !important;min-height:36px !important;max-height:36px !important;padding:8px 12px !important;}
  #modalChatEmpresa .btn-chat-icon{width:34px !important;height:34px !important;font-size:17px !important;}
  #modalChatEmpresa #btnEnviarChat{width:48px !important;height:38px !important;}
  #modalChatEmpresa .theme-card{height:49px !important;min-height:49px !important;}
  #modalChatEmpresa .theme-thumb{width:38px !important;height:38px !important;}
  #modalChatEmpresa .wa-rail-btn{height:38px !important;min-height:38px !important;}
  #modalChatEmpresa .chat-right-panel{grid-template-rows:minmax(190px,1fr) 78px 116px !important;}
  #modalChatEmpresa .actividad-card p{font-size:10px !important;padding:3px 0 !important;}
}
@media(max-width:1180px){
  #modalChatEmpresa .chat-layout-pro.chat-central-premium-final{grid-template-columns:118px 224px minmax(360px,1fr) 284px !important;}
  #modalChatEmpresa .chat-rail-wa{width:118px !important;min-width:118px !important;}
  #modalChatEmpresa .chat-themes-panel{width:224px !important;min-width:224px !important;}
  #modalChatEmpresa .chat-right-panel{width:284px !important;min-width:284px !important;}
}


/* =========================================================
   FIX REAL 07-05 - Escritura visible, sin pantalla azul, alertas reales,
   header con usuario real y temas legibles. No toca Firebase ni módulos.
   ========================================================= */
#modalChatEmpresa .chat-layout-pro.chat-central-premium-final{
  height:100vh!important;
  max-height:100vh!important;
  padding:6px!important;
  grid-template-columns:118px 250px minmax(420px,1fr) 320px!important;
  grid-template-rows:56px minmax(0,1fr)!important;
  gap:6px!important;
  overflow:hidden!important;
}
#modalChatEmpresa .chat-layout-pro.chat-central-premium-final::after{
  content:none!important;
  display:none!important;
}
#modalChatEmpresa .chat-oper-header{
  grid-column:1/5!important;
  grid-row:1!important;
  height:56px!important;
  min-height:56px!important;
  padding:5px 112px 5px 10px!important;
  border-radius:12px!important;
}
#modalChatEmpresa .chat-oper-brand{min-width:250px!important;}
#modalChatEmpresa .chat-oper-brand span{font-size:10px!important;line-height:1!important;}
#modalChatEmpresa .chat-oper-brand h1{font-size:22px!important;line-height:1!important;}
#modalChatEmpresa .chat-logo-empresa-principal{width:40px!important;height:40px!important;}
#modalChatEmpresa .chat-oper-badge{height:34px!important;display:flex!important;align-items:center!important;padding:0 16px!important;}
#modalChatEmpresa .chat-oper-actions{min-width:390px!important;gap:7px!important;margin-right:0!important;}
#modalChatEmpresa .chat-oper-search{height:38px!important;width:210px!important;}
#modalChatEmpresa .chat-oper-user{height:40px!important;min-width:150px!important;}
#modalChatEmpresa .chat-user-avatar-small{width:38px!important;height:38px!important;overflow:hidden!important;}
#modalChatEmpresa .chat-user-avatar-small img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important;display:block!important;}
#modalChatEmpresa #cerrarChatEmpresa{top:10px!important;right:12px!important;height:36px!important;min-width:88px!important;z-index:100003!important;}

#modalChatEmpresa .chat-rail-wa{
  grid-column:1!important;grid-row:2!important;width:118px!important;min-width:118px!important;height:100%!important;
  padding:8px 6px!important;gap:6px!important;overflow:hidden!important;
}
#modalChatEmpresa .wa-rail-btn{height:42px!important;min-height:42px!important;grid-template-columns:26px 1fr!important;font-size:18px!important;padding:0 7px!important;}
#modalChatEmpresa .wa-rail-btn span{font-size:10px!important;}
#modalChatEmpresa .wa-rail-btn b.sin-alertas{display:none!important;}
#modalChatEmpresa .chat-system-status{padding:6px!important;}

#modalChatEmpresa .chat-themes-panel{
  grid-column:2!important;grid-row:2!important;width:250px!important;min-width:250px!important;height:100%!important;
  padding:12px 10px!important;overflow-y:auto!important;overflow-x:hidden!important;
}
#modalChatEmpresa .theme-card{
  height:58px!important;min-height:58px!important;
  grid-template-columns:46px minmax(0,1fr) 14px!important;
  column-gap:8px!important;padding:6px!important;margin-bottom:7px!important;
  text-align:left!important;align-items:center!important;
}
#modalChatEmpresa .theme-card strong,#modalChatEmpresa .theme-card small{
  display:block!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;text-align:left!important;color:#fff!important;
}
#modalChatEmpresa .theme-card strong{font-size:12px!important;line-height:1.05!important;}
#modalChatEmpresa .theme-card small{font-size:9px!important;opacity:.86!important;}
#modalChatEmpresa .theme-thumb{width:42px!important;height:42px!important;}

#modalChatEmpresa .chat-panel-pro{
  grid-column:3!important;grid-row:2!important;height:100%!important;min-height:0!important;
  display:grid!important;grid-template-rows:48px 34px minmax(0,1fr) 68px!important;
  overflow:hidden!important;position:relative!important;z-index:4!important;border-radius:12px!important;
}
#modalChatEmpresa .chat-top-pro{height:48px!important;min-height:48px!important;padding:5px 10px!important;gap:8px!important;}
#modalChatEmpresa .chat-avatar-canal{width:38px!important;height:38px!important;font-size:14px!important;}
#modalChatEmpresa .chat-top-pro h3{font-size:18px!important;line-height:1!important;margin:0!important;}
#modalChatEmpresa .chat-top-pro .nota{font-size:10px!important;margin:1px 0 0!important;}
#modalChatEmpresa .chat-top-icons{margin-left:auto!important;display:flex!important;gap:7px!important;}
#modalChatEmpresa .chat-top-icons button{width:36px!important;height:36px!important;border-radius:11px!important;font-size:16px!important;}
#modalChatEmpresa .chat-pinned{height:28px!important;margin:4px 8px!important;padding:4px 9px!important;font-size:10.5px!important;overflow:hidden!important;}
#modalChatEmpresa .chat-pinned strong{font-size:10.5px!important;}
#modalChatEmpresa .chat-pinned span{font-size:9.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block!important;}
#modalChatEmpresa .chat-mensajes-pro{min-height:0!important;height:100%!important;overflow-y:auto!important;padding:10px 16px!important;}
#modalChatEmpresa .chat-composer-pro{
  position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;
  height:58px!important;min-height:58px!important;margin:5px 8px 7px!important;padding:6px 8px!important;
  display:grid!important;grid-template-columns:36px 36px minmax(0,1fr) 52px!important;gap:7px!important;
  border-radius:14px!important;z-index:50!important;pointer-events:auto!important;
}
#modalChatEmpresa .chat-textarea-wa{
  display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;
  height:40px!important;min-height:40px!important;max-height:40px!important;padding:9px 14px!important;
  font-size:15px!important;line-height:19px!important;resize:none!important;z-index:60!important;
}
#modalChatEmpresa .btn-chat-icon{width:36px!important;height:36px!important;font-size:18px!important;pointer-events:auto!important;}
#modalChatEmpresa #btnEnviarChat{width:52px!important;height:42px!important;font-size:21px!important;pointer-events:auto!important;z-index:60!important;}

#modalChatEmpresa .chat-right-panel{
  grid-column:4!important;grid-row:2!important;width:320px!important;min-width:320px!important;height:100%!important;
  display:grid!important;grid-template-rows:minmax(250px,1fr) 86px 132px!important;gap:6px!important;overflow:hidden!important;z-index:4!important;
}
#modalChatEmpresa .right-card{padding:9px!important;border-radius:12px!important;overflow:hidden!important;min-height:0!important;}
#modalChatEmpresa .users-online-card{grid-template-rows:24px 40px minmax(0,1fr) 32px!important;gap:7px!important;}
#modalChatEmpresa .sala-activa-card{display:grid!important;grid-template-rows:18px minmax(0,1fr)!important;gap:5px!important;}
#modalChatEmpresa .sala-activa-card .active-room{height:48px!important;min-height:48px!important;padding:7px 9px!important;display:flex!important;align-items:center!important;border-radius:10px!important;}
#modalChatEmpresa .actividad-card p{font-size:10.5px!important;padding:4px 0!important;margin:0!important;}

@media(max-height:700px){
  #modalChatEmpresa .chat-layout-pro.chat-central-premium-final{grid-template-rows:50px minmax(0,1fr)!important;padding:4px!important;gap:5px!important;}
  #modalChatEmpresa .chat-oper-header{height:50px!important;min-height:50px!important;}
  #modalChatEmpresa .chat-panel-pro{grid-template-rows:42px 30px minmax(0,1fr) 54px!important;}
  #modalChatEmpresa .chat-top-pro{height:42px!important;min-height:42px!important;}
  #modalChatEmpresa .chat-top-pro h3{font-size:16px!important;}
  #modalChatEmpresa .chat-pinned{height:24px!important;margin:3px 7px!important;padding:3px 7px!important;}
  #modalChatEmpresa .chat-composer-pro{height:48px!important;min-height:48px!important;margin:3px 7px 4px!important;padding:4px 6px!important;grid-template-columns:32px 32px minmax(0,1fr) 46px!important;}
  #modalChatEmpresa .chat-textarea-wa{height:34px!important;min-height:34px!important;max-height:34px!important;padding:7px 12px!important;font-size:14px!important;}
  #modalChatEmpresa .btn-chat-icon{width:32px!important;height:32px!important;font-size:16px!important;}
  #modalChatEmpresa #btnEnviarChat{width:46px!important;height:36px!important;}
  #modalChatEmpresa .theme-card{height:48px!important;min-height:48px!important;}
  #modalChatEmpresa .theme-thumb{width:36px!important;height:36px!important;}
  #modalChatEmpresa .wa-rail-btn{height:36px!important;min-height:36px!important;}
  #modalChatEmpresa .chat-right-panel{grid-template-rows:minmax(188px,1fr) 70px 106px!important;}
}

/* === CORRECCION FINAL CHAT ESM 06-05: input visible, sin barra azul, panel derecho y temas === */
#modalChatEmpresa .chat-layout-pro.chat-central-premium-final::after{
  content:'' !important;
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#modalChatEmpresa .chat-layout-pro.chat-central-premium-final{
  grid-template-rows:58px minmax(0,1fr) 0px !important;
  padding-bottom:6px !important;
}
#modalChatEmpresa .chat-panel-pro{
  grid-template-rows:48px 34px minmax(0,1fr) 76px !important;
  overflow:hidden !important;
  position:relative !important;
}
#modalChatEmpresa .chat-top-pro{
  height:48px !important;
  min-height:48px !important;
  padding:5px 10px !important;
}
#modalChatEmpresa .chat-avatar-canal{
  width:38px !important;
  height:38px !important;
  font-size:15px !important;
}
#modalChatEmpresa .chat-top-pro h3{
  font-size:19px !important;
  line-height:1 !important;
}
#modalChatEmpresa .chat-top-pro .nota{
  font-size:10px !important;
}
#modalChatEmpresa .chat-top-icons button{
  width:36px !important;
  height:36px !important;
}
#modalChatEmpresa .chat-pinned{
  height:30px !important;
  margin:3px 8px !important;
  padding:4px 8px !important;
  font-size:11px !important;
  border-radius:9px !important;
}
#modalChatEmpresa .chat-pinned strong{font-size:11px !important;}
#modalChatEmpresa .chat-pinned span{font-size:10px !important;}
#modalChatEmpresa .chat-mensajes-pro{
  padding:10px 14px !important;
  padding-bottom:12px !important;
  overflow-y:auto !important;
  min-height:0 !important;
  background:rgba(5,17,35,.50) !important;
}
#modalChatEmpresa .chat-mensajes-pro > .nota{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  min-height:auto !important;
  color:rgba(230,245,255,.52) !important;
}
#modalChatEmpresa .chat-composer-pro,
#modalChatEmpresa .chat-composer-wa-real{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  grid-row:4 !important;
  height:64px !important;
  min-height:64px !important;
  max-height:64px !important;
  margin:6px 10px 8px !important;
  padding:7px 9px !important;
  display:grid !important;
  grid-template-columns:38px 38px minmax(0,1fr) 54px !important;
  align-items:center !important;
  gap:8px !important;
  border-radius:15px !important;
  background:rgba(6,18,34,.96) !important;
  border:1px solid rgba(0,183,255,.62) !important;
  box-shadow:0 0 18px rgba(0,140,255,.38), inset 0 0 18px rgba(255,255,255,.05) !important;
  z-index:20 !important;
}
#modalChatEmpresa .chat-textarea-wa,
#modalChatEmpresa #chatTexto{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  resize:none !important;
  padding:10px 14px !important;
  font-size:15px !important;
  line-height:20px !important;
  color:#eaf8ff !important;
  caret-color:#00e5ff !important;
  background:rgba(9,25,48,.96) !important;
  border:1px solid rgba(125,206,255,.28) !important;
  border-radius:13px !important;
  outline:none !important;
  pointer-events:auto !important;
  z-index:30 !important;
}
#modalChatEmpresa #chatTexto::placeholder{color:rgba(230,245,255,.55) !important;}
#modalChatEmpresa .btn-chat-icon{
  width:38px !important;
  height:38px !important;
  border-radius:12px !important;
  z-index:31 !important;
}
#modalChatEmpresa #btnEnviarChat{
  width:54px !important;
  height:44px !important;
  min-height:44px !important;
  border-radius:14px !important;
  z-index:31 !important;
}
#modalChatEmpresa .chat-right-panel{
  grid-template-rows:minmax(245px,1fr) 82px 126px !important;
  gap:6px !important;
  overflow:hidden !important;
}
#modalChatEmpresa .sala-activa-card{
  padding:9px !important;
  display:grid !important;
  grid-template-rows:18px minmax(0,1fr) !important;
  gap:5px !important;
}
#modalChatEmpresa .sala-activa-card h3,
#modalChatEmpresa .actividad-card h3{
  font-size:13px !important;
  line-height:1 !important;
  margin:0 !important;
}
#modalChatEmpresa .sala-activa-card .active-room{
  min-height:44px !important;
  height:44px !important;
  padding:6px 8px !important;
  border-radius:10px !important;
  overflow:hidden !important;
}
#modalChatEmpresa .active-room strong{font-size:12px !important;line-height:1.05 !important;}
#modalChatEmpresa .active-room span{font-size:9.5px !important;line-height:1.05 !important;}
#modalChatEmpresa .actividad-card{
  padding:9px !important;
  overflow:hidden !important;
}
#modalChatEmpresa .actividad-card p{
  font-size:10.5px !important;
  line-height:1.05 !important;
  padding:4px 0 !important;
  margin:0 !important;
}
#modalChatEmpresa .actividad-card strong{font-size:11px !important;}
#modalChatEmpresa .theme-card{
  grid-template-columns:48px minmax(0,1fr) !important;
  grid-template-rows:1fr 1fr !important;
  align-items:center !important;
  column-gap:10px !important;
  overflow:hidden !important;
}
#modalChatEmpresa .theme-thumb{
  grid-column:1 !important;
  grid-row:1/3 !important;
}
#modalChatEmpresa .theme-card strong{
  grid-column:2 !important;
  grid-row:1 !important;
  display:block !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:12.5px !important;
  line-height:1.05 !important;
  color:#fff !important;
  text-align:left !important;
}
#modalChatEmpresa .theme-card small{
  grid-column:2 !important;
  grid-row:2 !important;
  display:block !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:9.5px !important;
  color:rgba(255,255,255,.82) !important;
  text-align:left !important;
}
#modalChatEmpresa #chatAlertasBadge.sin-alertas,
#modalChatEmpresa #chatAlertasBadge:empty,
#modalChatEmpresa #chatAlertasBadge[style*="display: none"]{
  display:none !important;
}
#modalChatEmpresa #chatAlertasBadge{
  display:none !important;
}
#modalChatEmpresa[data-alertas-reales="true"] #chatAlertasBadge{
  display:inline-grid !important;
}
#modalChatEmpresa .chat-oper-user{
  min-width:170px !important;
  max-width:220px !important;
  overflow:hidden !important;
}
#modalChatEmpresa .chat-oper-user strong,
#modalChatEmpresa .chat-oper-user small{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  display:block !important;
}
#modalChatEmpresa .right-card,
#modalChatEmpresa .chat-rail-wa,
#modalChatEmpresa .chat-themes-panel,
#modalChatEmpresa .chat-panel-pro,
#modalChatEmpresa .chat-oper-header{
  background-color:rgba(5,16,31,.82) !important;
  backdrop-filter:blur(16px) saturate(1.15) !important;
}
@media(max-height:700px){
  #modalChatEmpresa .chat-layout-pro.chat-central-premium-final{grid-template-rows:52px minmax(0,1fr) 0px !important;}
  #modalChatEmpresa .chat-panel-pro{grid-template-rows:42px 28px minmax(0,1fr) 58px !important;}
  #modalChatEmpresa .chat-composer-pro,#modalChatEmpresa .chat-composer-wa-real{height:50px !important;min-height:50px !important;max-height:50px !important;margin:4px 8px 5px !important;padding:5px 7px !important;grid-template-columns:34px 34px minmax(0,1fr) 48px !important;}
  #modalChatEmpresa .chat-textarea-wa,#modalChatEmpresa #chatTexto{height:36px !important;min-height:36px !important;max-height:36px !important;padding:8px 12px !important;font-size:14px !important;}
  #modalChatEmpresa .btn-chat-icon{width:34px !important;height:34px !important;}
  #modalChatEmpresa #btnEnviarChat{width:48px !important;height:38px !important;}
  #modalChatEmpresa .chat-right-panel{grid-template-rows:minmax(200px,1fr) 72px 108px !important;}
}

/* =========================================================
   FIX FINAL CHAT ESM - proporciones, escritura, paneles y logo
   ========================================================= */
#modalChatEmpresa,
#modalChatEmpresa.modal{
  overflow:hidden !important;
}
#modalChatEmpresa .modal-contenido.modal-chat-empresa{
  width:calc(100vw - 14px) !important;
  height:calc(100vh - 14px) !important;
  max-width:none !important;
  max-height:none !important;
  margin:7px auto !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:14px !important;
  background:#061429 !important;
}
#modalChatEmpresa .modal-contenido.modal-chat-empresa > .modal-header-pro{
  display:none !important;
}
#modalChatEmpresa .chat-layout-pro.chat-central-premium-final,
#modalChatEmpresa .chat-layout-pro.chat-empresarial-wa-full{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-columns:92px 300px minmax(420px,1fr) 330px !important;
  grid-template-rows:58px minmax(0,1fr) !important;
  gap:7px !important;
  padding:6px !important;
  overflow:hidden !important;
  background:radial-gradient(circle at 45% 12%, rgba(39,135,255,.30), transparent 30%),linear-gradient(135deg,#071426,#08152e 55%,#050b18) !important;
}
#modalChatEmpresa .chat-layout-pro.chat-central-premium-final::after{display:none !important;content:none !important;}
#modalChatEmpresa .chat-layout-pro.chat-central-premium-final::before{z-index:0 !important;opacity:.08 !important;pointer-events:none !important;}
#modalChatEmpresa .chat-oper-header{grid-column:1/5 !important;grid-row:1 !important;height:58px !important;min-height:58px !important;padding:6px 10px !important;display:grid !important;grid-template-columns:minmax(260px,1fr) 210px minmax(360px,1fr) !important;align-items:center !important;gap:12px !important;position:relative !important;z-index:5 !important;overflow:hidden !important;}
#modalChatEmpresa .chat-oper-brand{min-width:0 !important;display:flex !important;align-items:center !important;gap:9px !important;overflow:hidden !important;}
#modalChatEmpresa .chat-logo-empresa-principal{width:42px !important;height:42px !important;min-width:42px !important;border-radius:12px !important;object-fit:cover !important;}
#modalChatEmpresa .chat-oper-brand span{font-size:10px !important;letter-spacing:.08em !important;line-height:1 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#modalChatEmpresa .chat-oper-brand h1{font-size:22px !important;line-height:1 !important;margin:2px 0 0 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#modalChatEmpresa .chat-oper-badge{height:42px !important;min-width:0 !important;padding:5px 12px !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;border-radius:10px !important;overflow:hidden !important;}
#modalChatEmpresa .chat-oper-badge-logo{width:30px !important;height:30px !important;border-radius:9px !important;object-fit:cover !important;display:none;}
#modalChatEmpresa .chat-oper-badge span{font-size:13px !important;white-space:nowrap !important;}
#modalChatEmpresa .chat-oper-actions{min-width:0 !important;width:100% !important;display:grid !important;grid-template-columns:42px minmax(150px,1fr) minmax(170px,220px) 104px !important;gap:8px !important;align-items:center !important;}
#modalChatEmpresa .chat-oper-actions .chat-round-btn{width:42px !important;height:42px !important;}
#modalChatEmpresa .chat-oper-search{height:42px !important;min-width:0 !important;padding:0 10px !important;}
#modalChatEmpresa .chat-oper-search input{font-size:13px !important;min-width:0 !important;}
#modalChatEmpresa .chat-oper-user{height:42px !important;min-width:0 !important;max-width:none !important;padding:4px 8px !important;display:flex !important;align-items:center !important;}
#modalChatEmpresa .chat-user-avatar-small{width:34px !important;height:34px !important;min-width:34px !important;font-size:13px !important;overflow:hidden !important;}
#modalChatEmpresa .chat-user-avatar-small img{width:100% !important;height:100% !important;object-fit:cover !important;border-radius:50% !important;display:block !important;}
#modalChatEmpresa #cerrarChatEmpresa,.modal-chat-empresa #cerrarChatEmpresa{display:none !important;}
#modalChatEmpresa .chat-oper-actions::after{content:"← Volver";height:42px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(135deg,#72cfff,#317bff);color:#eaf8ff;font-weight:900;font-size:13px;box-shadow:0 0 18px rgba(0,183,255,.38);}
#modalChatEmpresa .chat-rail-wa{grid-column:1 !important;grid-row:2 !important;width:auto !important;min-width:0 !important;height:100% !important;min-height:0 !important;padding:8px 6px !important;overflow:hidden !important;position:relative !important;z-index:4 !important;}
#modalChatEmpresa .wa-rail-btn{height:48px !important;min-height:48px !important;width:100% !important;margin:0 0 6px !important;padding:0 6px !important;border-radius:10px !important;display:flex !important;align-items:center !important;justify-content:flex-start !important;gap:7px !important;font-size:15px !important;}
#modalChatEmpresa .wa-rail-btn span{font-size:10px !important;line-height:1 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;display:block !important;}
#modalChatEmpresa .chat-system-status{display:none !important;}
#modalChatEmpresa #chatAlertasBadge{display:none !important;}
#modalChatEmpresa .chat-themes-panel{grid-column:2 !important;grid-row:2 !important;width:auto !important;height:100% !important;min-height:0 !important;overflow-y:auto !important;padding:12px 10px !important;position:relative !important;z-index:4 !important;}
#modalChatEmpresa .themes-title h2{font-size:20px !important;line-height:1 !important;margin:0 0 4px !important;}
#modalChatEmpresa .themes-title span{font-size:11px !important;}
#modalChatEmpresa .theme-card{display:grid !important;grid-template-columns:54px minmax(0,1fr) !important;grid-template-rows:auto auto !important;align-items:center !important;column-gap:10px !important;width:100% !important;height:64px !important;min-height:64px !important;margin:8px 0 0 !important;padding:7px 10px !important;border-radius:13px !important;background:rgba(8,24,43,.68) !important;overflow:hidden !important;text-align:left !important;color:#eef8ff !important;}
#modalChatEmpresa .theme-card.activo,#modalChatEmpresa .theme-card:hover{background:linear-gradient(135deg,rgba(0,188,255,.42),rgba(13,42,80,.60)) !important;}
#modalChatEmpresa .theme-thumb{position:static !important;grid-column:1 !important;grid-row:1/3 !important;width:48px !important;height:48px !important;min-width:48px !important;border-radius:11px !important;display:block !important;}
#modalChatEmpresa .theme-card strong{grid-column:2 !important;grid-row:1 !important;font-size:12px !important;line-height:1.05 !important;color:#fff !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;min-width:0 !important;display:block !important;}
#modalChatEmpresa .theme-card small{grid-column:2 !important;grid-row:2 !important;font-size:9px !important;line-height:1.05 !important;color:rgba(235,248,255,.82) !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;min-width:0 !important;display:block !important;}
#modalChatEmpresa .theme-more{height:38px !important;margin-top:8px !important;font-size:11px !important;}
#modalChatEmpresa .chat-panel-pro{grid-column:3 !important;grid-row:2 !important;height:100% !important;min-height:0 !important;display:grid !important;grid-template-rows:46px 36px minmax(0,1fr) 72px !important;overflow:hidden !important;position:relative !important;z-index:4 !important;}
#modalChatEmpresa .chat-top-pro{height:46px !important;min-height:46px !important;padding:5px 10px !important;display:grid !important;grid-template-columns:38px minmax(0,1fr) auto !important;gap:9px !important;align-items:center !important;}
#modalChatEmpresa .chat-avatar-canal{width:36px !important;height:36px !important;min-width:36px !important;font-size:13px !important;}
#modalChatEmpresa .chat-top-pro h3{font-size:18px !important;line-height:1 !important;margin:0 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#modalChatEmpresa .chat-top-pro .nota{font-size:10px !important;line-height:1 !important;margin:2px 0 0 !important;}
#modalChatEmpresa .chat-top-icons{display:flex !important;gap:7px !important;}
#modalChatEmpresa .chat-top-icons button{width:34px !important;height:34px !important;border-radius:11px !important;}
#modalChatEmpresa .chat-pinned{height:30px !important;min-height:30px !important;margin:3px 8px !important;padding:4px 8px !important;display:grid !important;grid-template-columns:24px minmax(0,1fr) !important;align-items:center !important;overflow:hidden !important;}
#modalChatEmpresa .chat-pinned strong{font-size:11px !important;line-height:1 !important;}
#modalChatEmpresa .chat-pinned span{font-size:10px !important;line-height:1.1 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;display:block !important;}
#modalChatEmpresa .chat-mensajes-pro{grid-row:3 !important;min-height:0 !important;height:100% !important;overflow-y:auto !important;padding:10px 12px !important;background:rgba(7,23,45,.52) !important;}
#modalChatEmpresa .chat-mensajes-pro > .nota{display:none !important;}
#modalChatEmpresa .chat-composer-pro,#modalChatEmpresa .chat-composer-wa-real{grid-row:4 !important;position:relative !important;left:auto !important;right:auto !important;bottom:auto !important;height:60px !important;min-height:60px !important;max-height:60px !important;margin:5px 9px 8px !important;padding:7px 8px !important;display:grid !important;grid-template-columns:36px 36px minmax(0,1fr) 50px !important;align-items:center !important;gap:7px !important;border-radius:14px !important;background:rgba(5,18,34,.98) !important;border:1px solid rgba(0,195,255,.75) !important;box-shadow:0 0 18px rgba(0,140,255,.45),inset 0 0 14px rgba(255,255,255,.05) !important;z-index:50 !important;overflow:hidden !important;}
#modalChatEmpresa .chat-textarea-wa,#modalChatEmpresa #chatTexto{display:block !important;visibility:visible !important;opacity:1 !important;width:100% !important;height:40px !important;min-height:40px !important;max-height:40px !important;resize:none !important;overflow-y:auto !important;padding:10px 13px !important;font-size:14px !important;line-height:18px !important;color:#f2fbff !important;background:rgba(8,27,52,.98) !important;border:1px solid rgba(124,213,255,.38) !important;border-radius:12px !important;outline:none !important;pointer-events:auto !important;user-select:text !important;z-index:60 !important;}
#modalChatEmpresa #chatTexto::placeholder{color:rgba(235,248,255,.55) !important;}
#modalChatEmpresa .btn-chat-icon{width:36px !important;height:36px !important;min-width:36px !important;border-radius:11px !important;display:grid !important;place-items:center !important;z-index:61 !important;}
#modalChatEmpresa #btnEnviarChat{width:50px !important;height:42px !important;min-width:50px !important;border-radius:13px !important;z-index:61 !important;}
#modalChatEmpresa .chat-right-panel{grid-column:4 !important;grid-row:2 !important;height:100% !important;min-height:0 !important;display:grid !important;grid-template-rows:minmax(0,1fr) 86px 136px !important;gap:7px !important;overflow:hidden !important;position:relative !important;z-index:4 !important;}
#modalChatEmpresa .right-card{min-height:0 !important;overflow:hidden !important;padding:10px !important;border-radius:14px !important;}
#modalChatEmpresa .right-title{display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;gap:6px !important;align-items:center !important;margin-bottom:8px !important;}
#modalChatEmpresa .right-title h3{font-size:14px !important;line-height:1 !important;margin:0 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#modalChatEmpresa .right-title span{font-size:10px !important;padding:7px 9px !important;border-radius:9px !important;white-space:nowrap !important;}
#modalChatEmpresa .chat-search-wa{height:38px !important;min-height:38px !important;margin-bottom:8px !important;padding:0 10px !important;border-radius:12px !important;}
#modalChatEmpresa .chat-search-wa input{font-size:12px !important;height:100% !important;min-width:0 !important;color:#eaf8ff !important;}
#modalChatEmpresa .lista-personas-chat-wa{height:calc(100% - 94px) !important;min-height:0 !important;overflow-y:auto !important;padding-right:4px !important;}
#modalChatEmpresa .persona-chat-card,#modalChatEmpresa .persona-chat-wa{height:50px !important;min-height:50px !important;margin:0 0 7px !important;padding:6px 8px !important;border-radius:12px !important;display:grid !important;grid-template-columns:38px minmax(0,1fr) 10px !important;gap:8px !important;align-items:center !important;background:rgba(7,22,42,.58) !important;color:#eaf8ff !important;overflow:hidden !important;}
#modalChatEmpresa .persona-chat-card.activa,#modalChatEmpresa .persona-chat-wa.activa{background:linear-gradient(135deg,rgba(0,188,255,.26),rgba(255,255,255,.08)) !important;color:#f5fcff !important;}
#modalChatEmpresa .persona-chat-card img,#modalChatEmpresa .persona-chat-card .avatar,#modalChatEmpresa .persona-avatar{width:38px !important;height:38px !important;min-width:38px !important;border-radius:50% !important;object-fit:cover !important;}
#modalChatEmpresa .persona-chat-card strong,#modalChatEmpresa .persona-chat-wa strong{font-size:12px !important;line-height:1.05 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;color:inherit !important;}
#modalChatEmpresa .persona-chat-card small,#modalChatEmpresa .persona-chat-wa small{font-size:9.5px !important;line-height:1.05 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;color:rgba(235,248,255,.72) !important;}
#modalChatEmpresa .ver-todos-chat{height:38px !important;margin-top:7px !important;border-radius:12px !important;font-size:12px !important;}
#modalChatEmpresa .sala-activa-card{display:grid !important;grid-template-rows:18px minmax(0,1fr) !important;gap:6px !important;padding:9px !important;}
#modalChatEmpresa .sala-activa-card h3,#modalChatEmpresa .actividad-card h3{font-size:13px !important;line-height:1 !important;margin:0 !important;white-space:nowrap !important;}
#modalChatEmpresa .active-room{height:45px !important;min-height:45px !important;padding:6px 8px !important;border-radius:10px !important;display:grid !important;grid-template-columns:34px minmax(0,1fr) !important;align-items:center !important;gap:7px !important;overflow:hidden !important;}
#modalChatEmpresa .active-room strong{font-size:12px !important;line-height:1.05 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;display:block !important;}
#modalChatEmpresa .active-room span{font-size:9.5px !important;line-height:1.05 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;display:block !important;}
#modalChatEmpresa .actividad-card{padding:9px !important;display:grid !important;grid-template-rows:18px repeat(4,1fr) !important;gap:0 !important;}
#modalChatEmpresa .actividad-card p{font-size:10.5px !important;line-height:1.1 !important;padding:3px 0 !important;margin:0 !important;display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;gap:6px !important;align-items:center !important;white-space:nowrap !important;overflow:hidden !important;}
#modalChatEmpresa .actividad-card strong{font-size:11px !important;}
body.chat-tema-neon-global .modal:not(#modalChatEmpresa) .modal-contenido,
body.chat-tema-neon-global main,
body.chat-tema-neon-global .modulo-card{border-color:rgba(0,229,255,.35) !important;box-shadow:0 0 18px rgba(0,183,255,.15) !important;}
body.chat-tema-tactico-global .modal:not(#modalChatEmpresa) .modal-contenido,
body.chat-tema-tactico-global main,
body.chat-tema-tactico-global .modulo-card{border-color:rgba(20,255,117,.30) !important;}
body.chat-tema-dorado-global .modal:not(#modalChatEmpresa) .modal-contenido,
body.chat-tema-dorado-global main,
body.chat-tema-dorado-global .modulo-card{border-color:rgba(247,198,106,.32) !important;}
@media(max-height:760px){
  #modalChatEmpresa .chat-layout-pro.chat-central-premium-final,#modalChatEmpresa .chat-layout-pro.chat-empresarial-wa-full{grid-template-rows:50px minmax(0,1fr) !important;gap:5px !important;padding:5px !important;grid-template-columns:86px 286px minmax(400px,1fr) 310px !important;}
  #modalChatEmpresa .chat-oper-header{height:50px !important;min-height:50px !important;padding:5px 8px !important;grid-template-columns:minmax(230px,1fr) 190px minmax(330px,1fr) !important;}
  #modalChatEmpresa .chat-logo-empresa-principal{width:36px !important;height:36px !important;min-width:36px !important;}
  #modalChatEmpresa .chat-oper-brand h1{font-size:19px !important;}#modalChatEmpresa .chat-oper-brand span{font-size:9px !important;}
  #modalChatEmpresa .chat-oper-badge{height:36px !important;}#modalChatEmpresa .chat-oper-actions{grid-template-columns:36px minmax(130px,1fr) minmax(155px,200px) 92px !important;}
  #modalChatEmpresa .chat-oper-search,#modalChatEmpresa .chat-oper-user,#modalChatEmpresa .chat-oper-actions .chat-round-btn,#modalChatEmpresa .chat-oper-actions::after{height:36px !important;}
  #modalChatEmpresa .wa-rail-btn{height:42px !important;min-height:42px !important;margin-bottom:5px !important;}
  #modalChatEmpresa .chat-themes-panel{padding:9px 8px !important;}#modalChatEmpresa .theme-card{height:54px !important;min-height:54px !important;margin-top:6px !important;grid-template-columns:44px minmax(0,1fr) !important;padding:5px 8px !important;}#modalChatEmpresa .theme-thumb{width:40px !important;height:40px !important;min-width:40px !important;}#modalChatEmpresa .theme-card strong{font-size:11px !important;}#modalChatEmpresa .theme-card small{font-size:8.5px !important;}
  #modalChatEmpresa .chat-panel-pro{grid-template-rows:40px 28px minmax(0,1fr) 58px !important;}#modalChatEmpresa .chat-top-pro{height:40px !important;min-height:40px !important;}#modalChatEmpresa .chat-avatar-canal{width:32px !important;height:32px !important;min-width:32px !important;}#modalChatEmpresa .chat-top-pro h3{font-size:16px !important;}#modalChatEmpresa .chat-top-icons button{width:30px !important;height:30px !important;}#modalChatEmpresa .chat-pinned{height:24px !important;min-height:24px !important;margin:2px 7px !important;}#modalChatEmpresa .chat-pinned span{font-size:9px !important;}
  #modalChatEmpresa .chat-composer-pro,#modalChatEmpresa .chat-composer-wa-real{height:50px !important;min-height:50px !important;max-height:50px !important;margin:3px 7px 5px !important;padding:5px 6px !important;grid-template-columns:32px 32px minmax(0,1fr) 46px !important;}#modalChatEmpresa .chat-textarea-wa,#modalChatEmpresa #chatTexto{height:36px !important;min-height:36px !important;max-height:36px !important;font-size:13px !important;padding:8px 11px !important;}#modalChatEmpresa .btn-chat-icon{width:32px !important;height:32px !important;min-width:32px !important;}#modalChatEmpresa #btnEnviarChat{width:46px !important;height:36px !important;min-width:46px !important;}
  #modalChatEmpresa .chat-right-panel{grid-template-rows:minmax(0,1fr) 72px 112px !important;}#modalChatEmpresa .right-card{padding:8px !important;}#modalChatEmpresa .right-title h3{font-size:12px !important;}#modalChatEmpresa .right-title span{font-size:9px !important;padding:6px 8px !important;}#modalChatEmpresa .chat-search-wa{height:34px !important;margin-bottom:6px !important;}#modalChatEmpresa .persona-chat-card,#modalChatEmpresa .persona-chat-wa{height:44px !important;min-height:44px !important;margin-bottom:5px !important;grid-template-columns:34px minmax(0,1fr) 8px !important;}#modalChatEmpresa .persona-chat-card img,#modalChatEmpresa .persona-chat-card .avatar,#modalChatEmpresa .persona-avatar{width:34px !important;height:34px !important;min-width:34px !important;}#modalChatEmpresa .ver-todos-chat{height:32px !important;margin-top:5px !important;}#modalChatEmpresa .active-room{height:38px !important;min-height:38px !important;}#modalChatEmpresa .actividad-card p{font-size:9.5px !important;padding:2px 0 !important;}
}



/* =========================================================
   SOFTWARE ESM - CHAT CENTRAL OPERATIVA FINAL LIMPIO
   Arreglo real: input visible, proporciones, temas, logo y paneles.
   ========================================================= */
#modalChatEmpresa.modal:not(.oculto){
  display:flex !important;
  align-items:stretch !important;
  justify-content:center !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#030814 !important;
}
#modalChatEmpresa .modal-contenido.modal-chat-empresa{
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:hidden !important;
  background:#030814 !important;
  color:#eef8ff !important;
}
#modalChatEmpresa .modal-contenido.modal-chat-empresa > .modal-header-pro{display:none !important;}
#modalChatEmpresa .chat-layout-pro.chat-central-premium-final,
#modalChatEmpresa .chat-layout-pro.chat-empresarial-wa-full{
  width:100vw !important;
  height:100vh !important;
  min-height:0 !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:96px 300px minmax(430px,1fr) 340px !important;
  grid-template-rows:62px minmax(0,1fr) !important;
  gap:8px !important;
  padding:8px !important;
  overflow:hidden !important;
  position:relative !important;
  background:
    radial-gradient(circle at 58% 18%, rgba(0,164,255,.18), transparent 28%),
    radial-gradient(circle at 86% 76%, rgba(0,255,209,.10), transparent 30%),
    linear-gradient(135deg,#030814 0%,#071626 52%,#020712 100%) !important;
}
#modalChatEmpresa .chat-layout-pro.chat-central-premium-final::before,
#modalChatEmpresa .chat-layout-pro.chat-central-premium-final::after{
  pointer-events:none !important;
  z-index:0 !important;
  opacity:.08 !important;
}
#modalChatEmpresa .chat-oper-header,
#modalChatEmpresa .chat-rail-wa,
#modalChatEmpresa .chat-themes-panel,
#modalChatEmpresa .chat-panel-pro,
#modalChatEmpresa .chat-right-panel{position:relative !important;z-index:2 !important;}
#modalChatEmpresa .chat-oper-header,
#modalChatEmpresa .chat-rail-wa,
#modalChatEmpresa .chat-themes-panel,
#modalChatEmpresa .chat-panel-pro,
#modalChatEmpresa .right-card{
  background:linear-gradient(180deg,rgba(9,24,43,.88),rgba(5,14,27,.80)) !important;
  border:1px solid rgba(104,210,255,.18) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter:blur(18px) saturate(1.25) !important;
}
#modalChatEmpresa .chat-oper-header{
  grid-column:1/5 !important;grid-row:1 !important;
  height:62px !important;min-height:62px !important;
  padding:7px 10px !important;border-radius:18px !important;
  display:grid !important;grid-template-columns:minmax(260px,1fr) 175px minmax(300px,1fr) !important;
  align-items:center !important;gap:12px !important;overflow:hidden !important;
}
#modalChatEmpresa .chat-oper-brand{display:flex !important;align-items:center !important;gap:10px !important;min-width:0 !important;overflow:hidden !important;}
#modalChatEmpresa .chat-logo-empresa-principal{width:44px !important;height:44px !important;min-width:44px !important;border-radius:14px !important;object-fit:cover !important;background:linear-gradient(135deg,#28d9ff,#184dff) !important;}
#modalChatEmpresa .chat-oper-brand span{font-size:9px !important;letter-spacing:.12em !important;color:rgba(196,229,255,.68) !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#modalChatEmpresa .chat-oper-brand h1{font-size:21px !important;line-height:1 !important;margin:3px 0 0 !important;color:#fff !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#modalChatEmpresa .chat-oper-badge{height:44px !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:0 !important;border-radius:15px !important;background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.11) !important;overflow:hidden !important;}
#modalChatEmpresa .chat-oper-badge-logo{width:42px !important;height:42px !important;min-width:42px !important;border-radius:13px !important;object-fit:cover !important;display:block !important;}
#modalChatEmpresa .chat-oper-badge span{display:none !important;}
#modalChatEmpresa .chat-oper-actions{min-width:0 !important;display:grid !important;grid-template-columns:42px minmax(130px,1fr) minmax(160px,220px) 96px !important;align-items:center !important;gap:8px !important;}
#modalChatEmpresa .chat-oper-actions .chat-round-btn{height:42px !important;width:42px !important;border-radius:14px !important;}
#modalChatEmpresa .chat-oper-search{height:42px !important;min-width:0 !important;padding:0 11px !important;border-radius:14px !important;background:rgba(255,255,255,.07) !important;}
#modalChatEmpresa .chat-oper-search input{font-size:12px !important;color:#eaf8ff !important;min-width:0 !important;}
#modalChatEmpresa .chat-oper-user{height:42px !important;min-width:0 !important;max-width:none !important;padding:4px 8px !important;border-radius:14px !important;background:rgba(255,255,255,.07) !important;display:flex !important;align-items:center !important;gap:8px !important;}
#modalChatEmpresa .chat-user-avatar-small{width:34px !important;height:34px !important;min-width:34px !important;border-radius:50% !important;overflow:hidden !important;display:grid !important;place-items:center !important;background:linear-gradient(135deg,#2de2ff,#225dff) !important;color:white !important;font-weight:900 !important;}
#modalChatEmpresa .chat-user-avatar-small img{width:100% !important;height:100% !important;object-fit:cover !important;border-radius:50% !important;}
#modalChatEmpresa .chat-oper-user strong{font-size:12px !important;color:#fff !important;line-height:1.05 !important;display:block !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#modalChatEmpresa .chat-oper-user small{font-size:10px !important;color:rgba(223,244,255,.72) !important;line-height:1.05 !important;display:block !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#modalChatEmpresa #cerrarChatEmpresa{display:none !important;}
#modalChatEmpresa .chat-oper-actions::after{content:'← Volver';height:42px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(135deg,#58d6ff,#2d72ff);color:#fff;font-size:12px;font-weight:900;box-shadow:0 0 20px rgba(48,166,255,.34);}

#modalChatEmpresa .chat-rail-wa{grid-column:1 !important;grid-row:2 !important;height:100% !important;min-height:0 !important;border-radius:18px !important;padding:10px 8px !important;display:flex !important;flex-direction:column !important;gap:7px !important;overflow:hidden !important;}
#modalChatEmpresa .wa-rail-btn{width:100% !important;height:43px !important;min-height:43px !important;border-radius:13px !important;margin:0 !important;padding:0 7px !important;display:flex !important;align-items:center !important;justify-content:flex-start !important;gap:7px !important;background:rgba(255,255,255,.045) !important;border:1px solid rgba(255,255,255,.07) !important;color:#dff7ff !important;font-size:16px !important;box-shadow:none !important;}
#modalChatEmpresa .wa-rail-btn span{font-size:9px !important;font-weight:900 !important;letter-spacing:.04em !important;line-height:1 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#modalChatEmpresa .wa-rail-btn.activo{background:linear-gradient(135deg,rgba(24,164,255,.34),rgba(255,255,255,.08)) !important;border-color:rgba(112,212,255,.36) !important;}
#modalChatEmpresa #chatAlertasBadge,#modalChatEmpresa #chatAlertasBadge.sin-alertas{display:none !important;}
#modalChatEmpresa[data-alertas-reales='true'] #chatAlertasBadge{display:inline-grid !important;}
#modalChatEmpresa .chat-system-status{display:none !important;}

#modalChatEmpresa .chat-themes-panel{grid-column:2 !important;grid-row:2 !important;height:100% !important;min-height:0 !important;border-radius:18px !important;padding:12px 10px !important;overflow:hidden auto !important;display:block !important;}
#modalChatEmpresa .themes-title{margin:0 0 10px !important;padding:0 2px !important;}
#modalChatEmpresa .themes-title h2{font-size:20px !important;margin:0 !important;color:#fff !important;line-height:1 !important;}
#modalChatEmpresa .themes-title span{font-size:10px !important;color:rgba(220,244,255,.65) !important;}
#modalChatEmpresa .theme-card{width:100% !important;height:54px !important;min-height:54px !important;margin:0 0 8px !important;padding:6px 9px !important;border-radius:15px !important;display:grid !important;grid-template-columns:42px minmax(0,1fr) !important;grid-template-rows:1fr 1fr !important;column-gap:10px !important;align-items:center !important;background:rgba(255,255,255,.055) !important;border:1px solid rgba(255,255,255,.09) !important;overflow:hidden !important;text-align:left !important;}
#modalChatEmpresa .theme-card.activo{border-color:rgba(99,211,255,.52) !important;background:linear-gradient(135deg,rgba(33,156,255,.22),rgba(255,255,255,.06)) !important;}
#modalChatEmpresa .theme-thumb{grid-column:1 !important;grid-row:1/3 !important;width:38px !important;height:38px !important;min-width:38px !important;border-radius:13px !important;}
#modalChatEmpresa .theme-card strong{grid-column:2 !important;grid-row:1 !important;font-size:11.5px !important;line-height:1 !important;color:#fff !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;margin:0 !important;}
#modalChatEmpresa .theme-card small{grid-column:2 !important;grid-row:2 !important;font-size:8.5px !important;line-height:1 !important;color:rgba(230,246,255,.70) !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;margin:0 !important;}
#modalChatEmpresa .theme-more{height:36px !important;font-size:11px !important;border-radius:13px !important;}

#modalChatEmpresa .chat-panel-pro.chat-panel-conversacion{grid-column:3 !important;grid-row:2 !important;height:100% !important;min-height:0 !important;border-radius:18px !important;padding:0 !important;overflow:hidden !important;display:grid !important;grid-template-rows:46px 30px minmax(0,1fr) 68px !important;background:rgba(4,13,25,.72) !important;}
#modalChatEmpresa .chat-top-pro{height:46px !important;min-height:46px !important;padding:5px 9px !important;margin:0 !important;display:flex !important;align-items:center !important;gap:8px !important;background:rgba(255,255,255,.035) !important;border-bottom:1px solid rgba(255,255,255,.07) !important;overflow:hidden !important;}
#modalChatEmpresa .chat-avatar-canal{width:34px !important;height:34px !important;min-width:34px !important;border-radius:12px !important;font-size:12px !important;display:grid !important;place-items:center !important;background:linear-gradient(135deg,#18d5ff,#2e66ff) !important;color:white !important;font-weight:900 !important;overflow:hidden !important;}
#modalChatEmpresa .chat-avatar-canal img{width:100% !important;height:100% !important;object-fit:cover !important;}
#modalChatEmpresa .chat-top-pro h3{font-size:15px !important;line-height:1 !important;margin:0 !important;color:#fff !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;max-width:100% !important;}
#modalChatEmpresa .chat-top-pro .nota{font-size:9px !important;line-height:1 !important;margin:2px 0 0 !important;color:rgba(207,238,255,.62) !important;}
#modalChatEmpresa .chat-top-icons{margin-left:auto !important;display:flex !important;gap:6px !important;}
#modalChatEmpresa .chat-top-icons button{width:30px !important;height:30px !important;border-radius:10px !important;background:rgba(255,255,255,.06) !important;color:#e9fbff !important;border:1px solid rgba(255,255,255,.08) !important;}
#modalChatEmpresa .chat-pinned{height:30px !important;min-height:30px !important;margin:0 !important;padding:4px 10px !important;display:flex !important;align-items:center !important;gap:8px !important;overflow:hidden !important;background:rgba(52,180,255,.08) !important;border:0 !important;border-bottom:1px solid rgba(255,255,255,.055) !important;border-radius:0 !important;}
#modalChatEmpresa .chat-pinned strong{font-size:10px !important;color:#fff !important;line-height:1 !important;}
#modalChatEmpresa .chat-pinned span{font-size:9px !important;color:rgba(225,245,255,.68) !important;display:block !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#modalChatEmpresa .chat-mensajes-pro{min-height:0 !important;height:auto !important;max-height:none !important;overflow-y:auto !important;padding:14px 18px 12px !important;background:transparent !important;}
#modalChatEmpresa .chat-mensajes-pro > .nota{color:rgba(222,245,255,.70) !important;}
#modalChatEmpresa .chat-msg{margin:0 0 10px !important;display:flex !important;gap:8px !important;align-items:flex-end !important;}
#modalChatEmpresa .chat-msg.chat-propio{flex-direction:row-reverse !important;}
#modalChatEmpresa .chat-msg-avatar{width:30px !important;height:30px !important;min-width:30px !important;border-radius:50% !important;overflow:hidden !important;background:rgba(255,255,255,.10) !important;color:#fff !important;font-size:11px !important;display:grid !important;place-items:center !important;}
#modalChatEmpresa .chat-msg-avatar img{width:100% !important;height:100% !important;object-fit:cover !important;}
#modalChatEmpresa .chat-propio .chat-msg-avatar{display:none !important;}
#modalChatEmpresa .chat-burbuja{max-width:min(620px,74%) !important;padding:8px 10px !important;border-radius:14px 14px 14px 5px !important;background:rgba(13,30,52,.92) !important;border:1px solid rgba(255,255,255,.075) !important;box-shadow:0 10px 28px rgba(0,0,0,.18) !important;color:#f4fbff !important;}
#modalChatEmpresa .chat-propio .chat-burbuja{border-radius:14px 14px 5px 14px !important;background:linear-gradient(135deg,rgba(20,184,255,.85),rgba(59,94,255,.78)) !important;color:#fff !important;}
#modalChatEmpresa .chat-msg-head{display:flex !important;justify-content:space-between !important;gap:18px !important;margin-bottom:4px !important;}
#modalChatEmpresa .chat-msg-head strong{font-size:11px !important;color:#8eeaff !important;}
#modalChatEmpresa .chat-msg-head small{font-size:9px !important;color:rgba(237,249,255,.58) !important;}
#modalChatEmpresa .chat-burbuja p{margin:0 !important;line-height:1.35 !important;}

#modalChatEmpresa .chat-composer-pro.chat-composer-wa-real{
  height:68px !important;min-height:68px !important;max-height:68px !important;
  margin:0 !important;padding:9px 10px !important;box-sizing:border-box !important;
  display:grid !important;grid-template-columns:40px 40px minmax(0,1fr) 54px !important;gap:8px !important;align-items:center !important;
  background:rgba(6,18,34,.98) !important;border-top:1px solid rgba(124,213,255,.20) !important;
  overflow:visible !important;position:relative !important;z-index:40 !important;
}
#modalChatEmpresa #chatGifUrl,.chat-format-mini{display:none !important;}
#modalChatEmpresa #chatTexto,
#modalChatEmpresa .chat-textarea-wa{
  display:block !important;visibility:visible !important;opacity:1 !important;
  width:100% !important;height:46px !important;min-height:46px !important;max-height:46px !important;
  box-sizing:border-box !important;resize:none !important;overflow-y:auto !important;
  padding:12px 14px !important;border-radius:15px !important;outline:none !important;
  background:rgba(255,255,255,.075) !important;border:1px solid rgba(125,215,255,.30) !important;color:#ffffff !important;
  font-size:14px !important;line-height:18px !important;pointer-events:auto !important;user-select:text !important;z-index:50 !important;
}
#modalChatEmpresa #chatTexto::placeholder{color:rgba(230,245,255,.55) !important;}
#modalChatEmpresa .btn-chat-icon{width:40px !important;height:40px !important;min-width:40px !important;border-radius:13px !important;display:grid !important;place-items:center !important;background:rgba(255,255,255,.07) !important;border:1px solid rgba(255,255,255,.08) !important;color:#dff8ff !important;z-index:50 !important;}
#modalChatEmpresa #btnEnviarChat{width:54px !important;height:46px !important;min-width:54px !important;border-radius:15px !important;display:grid !important;place-items:center !important;background:linear-gradient(135deg,#20d9ff,#276bff) !important;color:#fff !important;border:0 !important;box-shadow:0 0 22px rgba(32,184,255,.32) !important;z-index:50 !important;}

#modalChatEmpresa .chat-right-panel{grid-column:4 !important;grid-row:2 !important;height:100% !important;min-height:0 !important;display:grid !important;grid-template-rows:minmax(230px,1fr) 84px 126px !important;gap:8px !important;overflow:hidden !important;}
#modalChatEmpresa .right-card{min-height:0 !important;overflow:hidden !important;border-radius:18px !important;padding:10px !important;}
#modalChatEmpresa .right-title{display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;gap:6px !important;align-items:center !important;margin:0 0 8px !important;}
#modalChatEmpresa .right-title h3{font-size:13px !important;line-height:1 !important;margin:0 !important;color:#fff !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#modalChatEmpresa .right-title span{font-size:9px !important;padding:6px 8px !important;border-radius:999px !important;background:rgba(34,211,238,.13) !important;color:#c8f4ff !important;white-space:nowrap !important;}
#modalChatEmpresa .chat-search-wa{height:36px !important;min-height:36px !important;margin:0 0 8px !important;padding:0 10px !important;border-radius:12px !important;background:rgba(255,255,255,.065) !important;}
#modalChatEmpresa .chat-search-wa input{font-size:12px !important;color:#fff !important;height:100% !important;min-width:0 !important;}
#modalChatEmpresa .lista-personas-chat-wa{height:calc(100% - 86px) !important;min-height:0 !important;overflow-y:auto !important;padding:0 4px 0 0 !important;}
#modalChatEmpresa .chat-persona-item{height:52px !important;min-height:52px !important;width:100% !important;margin:0 0 7px !important;padding:6px 7px !important;border-radius:14px !important;display:grid !important;grid-template-columns:38px minmax(0,1fr) 12px !important;gap:8px !important;align-items:center !important;background:rgba(255,255,255,.055) !important;border:1px solid rgba(255,255,255,.065) !important;color:#f2fbff !important;overflow:hidden !important;}
#modalChatEmpresa .chat-persona-item.activo{background:linear-gradient(135deg,rgba(0,178,255,.30),rgba(255,255,255,.07)) !important;border-color:rgba(105,213,255,.30) !important;}
#modalChatEmpresa .chat-persona-foto{width:38px !important;height:38px !important;min-width:38px !important;border-radius:50% !important;object-fit:cover !important;display:grid !important;place-items:center !important;background:linear-gradient(135deg,#14d9ff,#276bff) !important;color:white !important;font-size:11px !important;font-weight:900 !important;}
#modalChatEmpresa .chat-persona-info{min-width:0 !important;overflow:hidden !important;}
#modalChatEmpresa .chat-persona-info strong{font-size:12px !important;line-height:1.05 !important;color:#fff !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;display:block !important;}
#modalChatEmpresa .chat-persona-info span{font-size:9.5px !important;line-height:1.05 !important;color:rgba(220,243,255,.68) !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;display:block !important;margin-top:3px !important;}
#modalChatEmpresa .chat-persona-item small{font-size:10px !important;color:#49ffab !important;}
#modalChatEmpresa .ver-todos-chat{height:32px !important;margin-top:6px !important;border-radius:12px !important;font-size:11px !important;}
#modalChatEmpresa .sala-activa-card{display:grid !important;grid-template-rows:18px minmax(0,1fr) !important;gap:6px !important;padding:9px !important;}
#modalChatEmpresa .sala-activa-card h3,#modalChatEmpresa .actividad-card h3{font-size:12px !important;line-height:1 !important;margin:0 !important;color:#fff !important;white-space:nowrap !important;}
#modalChatEmpresa .active-room{height:44px !important;min-height:44px !important;padding:6px 8px !important;border-radius:11px !important;display:grid !important;grid-template-columns:30px minmax(0,1fr) !important;gap:7px !important;align-items:center !important;background:rgba(255,255,255,.055) !important;overflow:hidden !important;}
#modalChatEmpresa .active-room strong{font-size:11px !important;line-height:1.05 !important;color:#fff !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;display:block !important;}
#modalChatEmpresa .active-room span{font-size:9px !important;line-height:1.05 !important;color:rgba(220,243,255,.66) !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;display:block !important;}
#modalChatEmpresa .actividad-card{display:grid !important;grid-template-rows:18px repeat(4,1fr) !important;gap:0 !important;padding:9px !important;}
#modalChatEmpresa .actividad-card p{font-size:9.7px !important;line-height:1.05 !important;margin:0 !important;padding:2px 0 !important;display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;gap:5px !important;align-items:center !important;white-space:nowrap !important;overflow:hidden !important;color:rgba(231,247,255,.72) !important;}
#modalChatEmpresa .actividad-card strong{font-size:10px !important;color:#fff !important;}
#modalChatEmpresa *::-webkit-scrollbar{width:6px !important;height:6px !important;}
#modalChatEmpresa *::-webkit-scrollbar-track{background:rgba(255,255,255,.03) !important;border-radius:99px !important;}
#modalChatEmpresa *::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#33d6ff,#3478ff) !important;border-radius:99px !important;}

/* Temas: afectan TODA la ventana de chat y se heredan al panel cuando el chat está abierto */
#modalChatEmpresa.chat-tema-neon{--esm-chat-accent:#00eaff;filter:saturate(1.08);}
#modalChatEmpresa.chat-tema-tactico{--esm-chat-accent:#4ade80;}
#modalChatEmpresa.chat-tema-dorado{--esm-chat-accent:#f7c66a;}
#modalChatEmpresa.chat-tema-carbono{--esm-chat-accent:#a9b4c7;}
#modalChatEmpresa.chat-tema-glass{--esm-chat-accent:#dff7ff;}
#modalChatEmpresa.chat-fondo-carbono .chat-layout-pro{background:linear-gradient(135deg,#020406,#141a22,#030507) !important;}
#modalChatEmpresa.chat-fondo-neon .chat-layout-pro{background:radial-gradient(circle at 70% 20%,rgba(0,234,255,.22),transparent 28%),linear-gradient(135deg,#060713,#091934,#030712) !important;}
#modalChatEmpresa.chat-fondo-tactico .chat-layout-pro{background:radial-gradient(circle at 70% 15%,rgba(74,222,128,.14),transparent 30%),linear-gradient(135deg,#031006,#07160f,#020804) !important;}
#modalChatEmpresa.chat-fondo-radial .chat-layout-pro{background:radial-gradient(circle at 60% 15%,rgba(247,198,106,.22),transparent 30%),linear-gradient(135deg,#120b03,#16110a,#050403) !important;}
#modalChatEmpresa.chat-fondo-limpio .chat-layout-pro{background:linear-gradient(135deg,#e9f5ff,#c9dcf5) !important;}
#modalChatEmpresa.chat-fondo-limpio .chat-oper-header,
#modalChatEmpresa.chat-fondo-limpio .chat-rail-wa,
#modalChatEmpresa.chat-fondo-limpio .chat-themes-panel,
#modalChatEmpresa.chat-fondo-limpio .chat-panel-pro,
#modalChatEmpresa.chat-fondo-limpio .right-card{background:rgba(255,255,255,.74) !important;color:#102033 !important;border-color:rgba(45,92,136,.16) !important;}
#modalChatEmpresa.chat-fondo-limpio .chat-oper-brand h1,
#modalChatEmpresa.chat-fondo-limpio .themes-title h2,
#modalChatEmpresa.chat-fondo-limpio .theme-card strong,
#modalChatEmpresa.chat-fondo-limpio .chat-top-pro h3,
#modalChatEmpresa.chat-fondo-limpio .right-title h3{color:#102033 !important;}
body.chat-tema-neon-global .modal:not(#modalChatEmpresa) .modal-contenido,
body.chat-tema-neon-global .modulo-card,
body.chat-tema-neon-global .topbar{border-color:rgba(0,234,255,.34) !important;box-shadow:0 0 20px rgba(0,184,255,.14) !important;}
body.chat-tema-tactico-global .modal:not(#modalChatEmpresa) .modal-contenido,
body.chat-tema-tactico-global .modulo-card,
body.chat-tema-tactico-global .topbar{border-color:rgba(74,222,128,.28) !important;}
body.chat-tema-dorado-global .modal:not(#modalChatEmpresa) .modal-contenido,
body.chat-tema-dorado-global .modulo-card,
body.chat-tema-dorado-global .topbar{border-color:rgba(247,198,106,.30) !important;}

@media(max-height:760px){
  #modalChatEmpresa .chat-layout-pro.chat-central-premium-final,#modalChatEmpresa .chat-layout-pro.chat-empresarial-wa-full{grid-template-columns:88px 286px minmax(390px,1fr) 312px !important;grid-template-rows:54px minmax(0,1fr) !important;gap:6px !important;padding:6px !important;}
  #modalChatEmpresa .chat-oper-header{height:54px !important;min-height:54px !important;grid-template-columns:minmax(220px,1fr) 150px minmax(280px,1fr) !important;}
  #modalChatEmpresa .chat-panel-pro.chat-panel-conversacion{grid-template-rows:42px 26px minmax(0,1fr) 62px !important;}
  #modalChatEmpresa .chat-composer-pro.chat-composer-wa-real{height:62px !important;min-height:62px !important;max-height:62px !important;padding:7px 8px !important;}
  #modalChatEmpresa #chatTexto,#modalChatEmpresa .chat-textarea-wa{height:42px !important;min-height:42px !important;max-height:42px !important;}
  #modalChatEmpresa .theme-card{height:50px !important;min-height:50px !important;}
  #modalChatEmpresa .chat-right-panel{grid-template-rows:minmax(185px,1fr) 76px 112px !important;}
}
@media(max-width:1180px){
  #modalChatEmpresa .chat-layout-pro.chat-central-premium-final,#modalChatEmpresa .chat-layout-pro.chat-empresarial-wa-full{grid-template-columns:82px 270px minmax(360px,1fr) 300px !important;}
}

/* =========================================================
   SOFTWARE ESM - TEMAS REALES EN VENTANAS/PANELES
   Corrige que el tema solo pintara el fondo. Ahora aplica a:
   ventanas, paneles, tarjetas, inputs, mensajes, botones y bordes.
   ========================================================= */

/* Variables compartidas: toman el tema general del body */
body[class*="tema-"] {
  --panel-theme: color-mix(in srgb, var(--bg1, #0f172a) 78%, transparent);
  --panel-theme-strong: color-mix(in srgb, var(--bg0, #020617) 88%, transparent);
  --panel-theme-soft: color-mix(in srgb, var(--glass, rgba(255,255,255,.08)) 100%, transparent);
  --panel-theme-border: var(--line, rgba(255,255,255,.14));
  --panel-theme-accent: var(--cyan, #57e8ff);
  --panel-theme-accent2: var(--blue, #5c8dff);
  --panel-theme-text: var(--text, #eef7ff);
  --panel-theme-muted: var(--muted, #a9b8ce);
}

/* Todas las ventanas principales del panel toman el tema */
body[class*="tema-"] .app-panel,
body[class*="tema-"] .topbar,
body[class*="tema-"] .dashboard,
body[class*="tema-"] .welcome-pro,
body[class*="tema-"] .modulo-card,
body[class*="tema-"] .modal-contenido,
body[class*="tema-"] .empresa-form-card,
body[class*="tema-"] .empresa-lista-card,
body[class*="tema-"] .usuarios-toolbar,
body[class*="tema-"] .resumen-usuarios,
body[class*="tema-"] .perfil-datos-base,
body[class*="tema-"] .perfil-foto-box,
body[class*="tema-"] .agenda-toolbar,
body[class*="tema-"] .agenda-acciones-masivas,
body[class*="tema-"] .correo-masivo-box,
body[class*="tema-"] .traslado-panel-card,
body[class*="tema-"] .config-modulos-card,
body[class*="tema-"] .gafete-card,
body[class*="tema-"] .right-card {
  background: linear-gradient(145deg, var(--panel-theme-soft), var(--panel-theme-strong)) !important;
  border: 1px solid var(--panel-theme-border) !important;
  color: var(--panel-theme-text) !important;
  box-shadow: 0 18px 45px color-mix(in srgb, var(--panel-theme-accent2) 18%, rgba(0,0,0,.45)) !important;
}

body[class*="tema-"] .modal-header-pro,
body[class*="tema-"] .chat-oper-header,
body[class*="tema-"] .chat-top-pro,
body[class*="tema-"] .chat-pinned,
body[class*="tema-"] .chat-composer-pro,
body[class*="tema-"] .chat-themes-panel,
body[class*="tema-"] .chat-right-panel,
body[class*="tema-"] .chat-panel-pro,
body[class*="tema-"] .chat-rail-wa {
  background: linear-gradient(145deg, var(--panel-theme), var(--panel-theme-strong)) !important;
  border-color: var(--panel-theme-border) !important;
  color: var(--panel-theme-text) !important;
}

body[class*="tema-"] h1,
body[class*="tema-"] h2,
body[class*="tema-"] h3,
body[class*="tema-"] strong,
body[class*="tema-"] .brand-text,
body[class*="tema-"] .modal-etiqueta,
body[class*="tema-"] .themes-title h2,
body[class*="tema-"] .chat-brand-texto h3,
body[class*="tema-"] .chat-top-pro h3 {
  color: var(--panel-theme-text) !important;
}

body[class*="tema-"] p,
body[class*="tema-"] small,
body[class*="tema-"] span,
body[class*="tema-"] .nota,
body[class*="tema-"] .themes-title span,
body[class*="tema-"] .chat-oper-brand span,
body[class*="tema-"] .right-title span {
  color: var(--panel-theme-muted) !important;
}

body[class*="tema-"] .input-modal,
body[class*="tema-"] .textarea-modal,
body[class*="tema-"] input,
body[class*="tema-"] textarea,
body[class*="tema-"] select,
body[class*="tema-"] .theme-select,
body[class*="tema-"] .chat-search-wa,
body[class*="tema-"] .chat-oper-search,
body[class*="tema-"] .chat-textarea-wa {
  background: color-mix(in srgb, var(--panel-theme-strong) 78%, white 7%) !important;
  border: 1px solid var(--panel-theme-border) !important;
  color: var(--panel-theme-text) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--panel-theme-accent) 10%, transparent) !important;
}

body[class*="tema-"] input::placeholder,
body[class*="tema-"] textarea::placeholder { color: color-mix(in srgb, var(--panel-theme-muted) 82%, transparent) !important; }

body[class*="tema-"] .btn-modal,
body[class*="tema-"] .btn-top,
body[class*="tema-"] .btn-cerrar-pro,
body[class*="tema-"] .btn-chat-send,
body[class*="tema-"] .btn-chat-icon,
body[class*="tema-"] .chat-round-btn,
body[class*="tema-"] .ver-todos-chat,
body[class*="tema-"] .wa-rail-btn.activo {
  background: linear-gradient(135deg, var(--panel-theme-accent), var(--panel-theme-accent2)) !important;
  color: #fff !important;
  border: 1px solid color-mix(in srgb, var(--panel-theme-accent) 45%, transparent) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--panel-theme-accent2) 28%, transparent) !important;
}

body[class*="tema-"] .chip-proyecto,
body[class*="tema-"] .badge-tipo,
body[class*="tema-"] .modal-etiqueta,
body[class*="tema-"] .chat-oper-badge,
body[class*="tema-"] .active-room {
  background: color-mix(in srgb, var(--panel-theme-accent) 16%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--panel-theme-accent) 30%, transparent) !important;
  color: var(--panel-theme-text) !important;
}

/* Tema del chat: cada tarjeta cambia TODAS las ventanas del chat */
#modalChatEmpresa.chat-tema-metal,
#modalChatEmpresa.chat-tema-carbono,
#modalChatEmpresa.chat-tema-neon,
#modalChatEmpresa.chat-tema-glass,
#modalChatEmpresa.chat-tema-ejecutivo,
#modalChatEmpresa.chat-tema-azul,
#modalChatEmpresa.chat-tema-morado,
#modalChatEmpresa.chat-tema-dorado,
#modalChatEmpresa.chat-tema-tactico,
#modalChatEmpresa.chat-tema-claro,
#modalChatEmpresa.chat-tema-whatsapp {
  color: var(--chat-text) !important;
}

#modalChatEmpresa.chat-tema-metal { --chat-accent:#64f7ff; --chat-accent-2:#7c8cff; --chat-frame:#07111f; --chat-window:#111827; --chat-window2:#182234; --chat-soft:rgba(255,255,255,.075); --chat-line:rgba(170,230,255,.18); --chat-text:#eef7ff; --chat-muted:#9fb5ca; }
#modalChatEmpresa.chat-tema-carbono { --chat-accent:#8ea4bd; --chat-accent-2:#e5edf7; --chat-frame:#05070b; --chat-window:#0d1117; --chat-window2:#151b23; --chat-soft:rgba(255,255,255,.065); --chat-line:rgba(210,225,240,.16); --chat-text:#f3f7fb; --chat-muted:#9aa7b6; }
#modalChatEmpresa.chat-tema-neon { --chat-accent:#00eaff; --chat-accent-2:#3366ff; --chat-frame:#030817; --chat-window:#071a2d; --chat-window2:#0b2238; --chat-soft:rgba(0,234,255,.10); --chat-line:rgba(0,234,255,.26); --chat-text:#eaffff; --chat-muted:#9bd1db; }
#modalChatEmpresa.chat-tema-tactico { --chat-accent:#4dff9d; --chat-accent-2:#1f8b55; --chat-frame:#07100b; --chat-window:#0f1f16; --chat-window2:#15281d; --chat-soft:rgba(77,255,157,.10); --chat-line:rgba(77,255,157,.22); --chat-text:#effff5; --chat-muted:#a6c7b3; }
#modalChatEmpresa.chat-tema-dorado { --chat-accent:#ffd36b; --chat-accent-2:#a56b17; --chat-frame:#0f0b05; --chat-window:#1c1408; --chat-window2:#2a1e0f; --chat-soft:rgba(255,211,107,.11); --chat-line:rgba(255,211,107,.25); --chat-text:#fff7e5; --chat-muted:#d8be88; }
#modalChatEmpresa.chat-tema-glass,
#modalChatEmpresa.chat-tema-claro,
#modalChatEmpresa.chat-tema-whatsapp { --chat-accent:#20c6ff; --chat-accent-2:#5f7cff; --chat-frame:#eaf3ff; --chat-window:rgba(255,255,255,.82); --chat-window2:rgba(235,245,255,.88); --chat-soft:rgba(255,255,255,.76); --chat-line:rgba(20,80,150,.17); --chat-text:#122033; --chat-muted:#526579; }
#modalChatEmpresa.chat-tema-ejecutivo { --chat-accent:#5e7cff; --chat-accent-2:#22d3ee; --chat-frame:#111827; --chat-window:#182033; --chat-window2:#202b42; --chat-soft:rgba(255,255,255,.075); --chat-line:rgba(130,160,220,.20); --chat-text:#f8fafc; --chat-muted:#aeb8c7; }
#modalChatEmpresa.chat-tema-azul { --chat-accent:#2894ff; --chat-accent-2:#0ea5e9; --chat-frame:#eaf4ff; --chat-window:#eef7ff; --chat-window2:#ddecff; --chat-soft:rgba(255,255,255,.65); --chat-line:rgba(37,99,235,.22); --chat-text:#102033; --chat-muted:#526579; }
#modalChatEmpresa.chat-tema-morado { --chat-accent:#b366ff; --chat-accent-2:#6d5dfc; --chat-frame:#120820; --chat-window:#1b102d; --chat-window2:#25143e; --chat-soft:rgba(179,102,255,.11); --chat-line:rgba(179,102,255,.24); --chat-text:#fbf6ff; --chat-muted:#c9acd8; }

#modalChatEmpresa .modal-contenido,
#modalChatEmpresa .chat-layout-pro,
#modalChatEmpresa .chat-oper-header,
#modalChatEmpresa .chat-rail-wa,
#modalChatEmpresa .chat-themes-panel,
#modalChatEmpresa .chat-panel-pro,
#modalChatEmpresa .chat-top-pro,
#modalChatEmpresa .chat-pinned,
#modalChatEmpresa .chat-right-panel,
#modalChatEmpresa .right-card,
#modalChatEmpresa .chat-composer-pro,
#modalChatEmpresa .theme-card,
#modalChatEmpresa .chat-persona-item,
#modalChatEmpresa .active-room {
  background: linear-gradient(145deg, var(--chat-window), var(--chat-window2)) !important;
  border-color: var(--chat-line) !important;
  color: var(--chat-text) !important;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--chat-accent) 12%, rgba(0,0,0,.36)) !important;
}

#modalChatEmpresa .chat-layout-pro { background: var(--chat-frame) !important; }
#modalChatEmpresa .chat-mensajes-wa {
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--chat-accent) 14%, transparent), transparent 34%),
    radial-gradient(circle at 82% 70%, color-mix(in srgb, var(--chat-accent-2) 13%, transparent), transparent 32%),
    linear-gradient(145deg, var(--chat-frame), var(--chat-window)) !important;
}
#modalChatEmpresa .chat-textarea-wa,
#modalChatEmpresa .chat-search-wa,
#modalChatEmpresa .chat-oper-search {
  background: color-mix(in srgb, var(--chat-window2) 86%, transparent) !important;
  border-color: var(--chat-line) !important;
  color: var(--chat-text) !important;
}
#modalChatEmpresa .chat-burbuja {
  background: linear-gradient(145deg, color-mix(in srgb, var(--chat-window2) 88%, white 8%), color-mix(in srgb, var(--chat-window) 92%, transparent)) !important;
  border: 1px solid var(--chat-line) !important;
  color: var(--chat-text) !important;
}
#modalChatEmpresa .chat-propio .chat-burbuja {
  background: linear-gradient(135deg, var(--chat-accent), var(--chat-accent-2)) !important;
  color:#fff !important;
}
#modalChatEmpresa .btn-chat-send,
#modalChatEmpresa .btn-chat-icon,
#modalChatEmpresa .chat-round-btn,
#modalChatEmpresa .ver-todos-chat,
#modalChatEmpresa .theme-card.activo,
#modalChatEmpresa .wa-rail-btn.activo {
  background: linear-gradient(135deg, var(--chat-accent), var(--chat-accent-2)) !important;
  color:#fff !important;
  border-color: color-mix(in srgb, var(--chat-accent) 55%, transparent) !important;
}
#modalChatEmpresa .themes-title h2,
#modalChatEmpresa .right-card h3,
#modalChatEmpresa .chat-top-pro h3,
#modalChatEmpresa .theme-card strong,
#modalChatEmpresa .chat-persona-info strong,
#modalChatEmpresa .active-room strong { color: var(--chat-text) !important; }
#modalChatEmpresa .themes-title span,
#modalChatEmpresa .right-card span,
#modalChatEmpresa .right-card p,
#modalChatEmpresa .theme-card small,
#modalChatEmpresa .chat-persona-info span,
#modalChatEmpresa .active-room span,
#modalChatEmpresa .nota { color: var(--chat-muted) !important; }
#modalChatEmpresa ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--chat-accent), var(--chat-accent-2)) !important; border-radius:20px !important; }

/* ===== AJUSTE FINAL: PANEL DE TEMAS COMPACTO Y SIN TEXTO CORTADO ===== */
#modalChatEmpresa .chat-themes-panel{
  padding:10px 8px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
#modalChatEmpresa .themes-title{
  margin:0 0 8px !important;
  padding:0 4px !important;
}
#modalChatEmpresa .themes-title h2{
  font-size:17px !important;
  line-height:1 !important;
  margin:0 0 3px !important;
  letter-spacing:.03em !important;
}
#modalChatEmpresa .themes-title span{
  font-size:9.5px !important;
  line-height:1.15 !important;
  display:block !important;
  white-space:normal !important;
}
#modalChatEmpresa .theme-card{
  width:100% !important;
  height:48px !important;
  min-height:48px !important;
  max-height:48px !important;
  margin:0 0 6px !important;
  padding:5px 7px !important;
  border-radius:12px !important;
  display:grid !important;
  grid-template-columns:34px minmax(0,1fr) !important;
  grid-template-rows:23px 15px !important;
  column-gap:8px !important;
  align-items:center !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
#modalChatEmpresa .theme-thumb{
  position:static !important;
  grid-column:1 !important;
  grid-row:1/3 !important;
  width:32px !important;
  min-width:32px !important;
  height:32px !important;
  min-height:32px !important;
  border-radius:9px !important;
  margin:0 !important;
  display:block !important;
}
#modalChatEmpresa .theme-card strong{
  grid-column:2 !important;
  grid-row:1 !important;
  font-size:10.5px !important;
  line-height:1.05 !important;
  margin:0 !important;
  padding:0 !important;
  color:#fff !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  min-width:0 !important;
  display:block !important;
}
#modalChatEmpresa .theme-card small{
  grid-column:2 !important;
  grid-row:2 !important;
  font-size:8px !important;
  line-height:1 !important;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  min-width:0 !important;
  display:block !important;
}
#modalChatEmpresa .theme-more{
  height:32px !important;
  min-height:32px !important;
  font-size:10px !important;
  margin-top:4px !important;
  border-radius:11px !important;
}
#modalChatEmpresa .chat-rail-wa .wa-rail-btn{
  min-height:48px !important;
  height:48px !important;
  padding:5px 2px !important;
  gap:2px !important;
}
#modalChatEmpresa .chat-rail-wa .wa-rail-btn span{
  font-size:8px !important;
  line-height:1 !important;
  max-width:54px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
@media (max-height:760px){
  #modalChatEmpresa .theme-card{height:42px !important;min-height:42px !important;max-height:42px !important;grid-template-columns:30px minmax(0,1fr) !important;grid-template-rows:20px 12px !important;margin-bottom:5px !important;}
  #modalChatEmpresa .theme-thumb{width:28px !important;height:28px !important;min-width:28px !important;min-height:28px !important;}
  #modalChatEmpresa .theme-card strong{font-size:9.5px !important;}
  #modalChatEmpresa .theme-card small{font-size:7.5px !important;}
  #modalChatEmpresa .themes-title h2{font-size:15px !important;}
  #modalChatEmpresa .themes-title span{font-size:8.5px !important;}
}

/* =========================================================
   AJUSTE FINAL: usuarios en línea + sala de chat activa
   Evita textos/fotos cortados y acomoda tarjetas del panel derecho
   ========================================================= */
#modalChatEmpresa .chat-right-panel{
  grid-template-rows:minmax(390px,1fr) 104px 178px!important;
  gap:8px!important;
  padding:0!important;
  overflow:hidden!important;
}

#modalChatEmpresa .users-online-card{
  display:grid!important;
  grid-template-rows:auto 42px minmax(0,1fr) 30px!important;
  gap:8px!important;
  padding:11px!important;
  overflow:hidden!important;
}

#modalChatEmpresa .right-title{
  min-height:26px!important;
  align-items:center!important;
}

#modalChatEmpresa .right-title h3,
#modalChatEmpresa .right-card h3{
  font-size:13px!important;
  line-height:1.15!important;
  margin:0!important;
  letter-spacing:.35px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#modalChatEmpresa .right-title span{
  font-size:10px!important;
  line-height:1!important;
  padding:5px 7px!important;
  border-radius:7px!important;
  white-space:nowrap!important;
}

#modalChatEmpresa .users-online-card .chat-search-wa{
  height:40px!important;
  min-height:40px!important;
  padding:0 9px!important;
  border-radius:10px!important;
}

#modalChatEmpresa .users-online-card .chat-search-wa input{
  font-size:12px!important;
}

#modalChatEmpresa .lista-personas-chat-wa{
  min-height:0!important;
  height:100%!important;
  max-height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:2px 5px 2px 0!important;
  gap:6px!important;
}

#modalChatEmpresa .chat-persona-item{
  min-height:50px!important;
  height:auto!important;
  padding:6px 7px!important;
  grid-template-columns:38px minmax(0,1fr) 14px!important;
  gap:8px!important;
  border-radius:10px!important;
  overflow:visible!important;
}

#modalChatEmpresa .chat-persona-foto{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  font-size:13px!important;
}

#modalChatEmpresa .chat-persona-info{
  min-width:0!important;
  overflow:hidden!important;
}

#modalChatEmpresa .chat-persona-info strong{
  font-size:12px!important;
  line-height:1.15!important;
  margin-bottom:3px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#modalChatEmpresa .chat-persona-info span{
  font-size:10.5px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#modalChatEmpresa .chat-persona-item small{
  font-size:14px!important;
  line-height:1!important;
}

#modalChatEmpresa .ver-todos-chat{
  height:28px!important;
  min-height:28px!important;
  font-size:11px!important;
  padding:0!important;
}

#modalChatEmpresa .sala-activa-card{
  padding:11px!important;
  overflow:hidden!important;
}

#modalChatEmpresa .sala-activa-card h3{
  font-size:13px!important;
  margin:0 0 8px!important;
}

#modalChatEmpresa .sala-activa-card .active-room,
#modalChatEmpresa .active-room{
  height:58px!important;
  min-height:58px!important;
  max-height:58px!important;
  padding:8px 10px!important;
  gap:9px!important;
  align-items:center!important;
  overflow:hidden!important;
  border-radius:11px!important;
}

#modalChatEmpresa .active-room > div{
  min-width:0!important;
  overflow:hidden!important;
}

#modalChatEmpresa .active-room strong{
  font-size:12px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#modalChatEmpresa .active-room span{
  font-size:10.5px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#modalChatEmpresa .actividad-card{
  padding:11px!important;
  overflow:hidden!important;
}

#modalChatEmpresa .actividad-card h3{
  font-size:13px!important;
  margin:0 0 8px!important;
}

#modalChatEmpresa .actividad-card p{
  font-size:11.5px!important;
  line-height:1.15!important;
  padding:6px 0!important;
}

/* =========================================================
   AJUSTE URGENTE REAL: panel derecho completo sin bajarse
   Compacta Usuarios, Sala Activa y Actividad del Día para que todo quepa
   ========================================================= */
#modalChatEmpresa .chat-right-panel{
  height:100% !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-rows:minmax(0,1fr) 78px 112px !important;
  gap:6px !important;
  overflow:hidden !important;
}

#modalChatEmpresa .right-card{
  min-height:0 !important;
  overflow:hidden !important;
  padding:8px !important;
  border-radius:13px !important;
}

#modalChatEmpresa .users-online-card{
  display:grid !important;
  grid-template-rows:24px 34px minmax(0,1fr) 26px !important;
  gap:5px !important;
  padding:8px !important;
  min-height:0 !important;
}

#modalChatEmpresa .right-title{
  height:24px !important;
  min-height:24px !important;
  margin:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:4px !important;
  align-items:center !important;
}

#modalChatEmpresa .right-title h3,
#modalChatEmpresa .right-card h3{
  font-size:11px !important;
  line-height:1 !important;
  letter-spacing:.25px !important;
  margin:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#modalChatEmpresa .right-title span{
  font-size:8.5px !important;
  line-height:1 !important;
  padding:4px 6px !important;
  max-width:70px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#modalChatEmpresa .users-online-card .chat-search-wa{
  height:34px !important;
  min-height:34px !important;
  padding:0 8px !important;
  margin:0 !important;
  border-radius:9px !important;
}
#modalChatEmpresa .users-online-card .chat-search-wa input{
  font-size:10.5px !important;
  height:100% !important;
}

#modalChatEmpresa .lista-personas-chat-wa{
  height:100% !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-right:3px !important;
}

#modalChatEmpresa .chat-persona-item,
#modalChatEmpresa .persona-chat-card,
#modalChatEmpresa .persona-chat-wa{
  min-height:42px !important;
  height:42px !important;
  max-height:42px !important;
  padding:4px 6px !important;
  margin-bottom:4px !important;
  grid-template-columns:31px minmax(0,1fr) 8px !important;
  gap:6px !important;
  border-radius:9px !important;
  overflow:hidden !important;
}

#modalChatEmpresa .chat-persona-foto,
#modalChatEmpresa .persona-chat-card img,
#modalChatEmpresa .persona-chat-card .avatar,
#modalChatEmpresa .persona-avatar{
  width:31px !important;
  height:31px !important;
  min-width:31px !important;
  min-height:31px !important;
  font-size:11px !important;
}

#modalChatEmpresa .chat-persona-info strong,
#modalChatEmpresa .persona-chat-card strong,
#modalChatEmpresa .persona-chat-wa strong{
  font-size:10.5px !important;
  line-height:1.05 !important;
  margin:0 0 2px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#modalChatEmpresa .chat-persona-info span,
#modalChatEmpresa .persona-chat-card span,
#modalChatEmpresa .persona-chat-wa span{
  font-size:8.8px !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#modalChatEmpresa .chat-persona-item small{
  font-size:8px !important;
}

#modalChatEmpresa .ver-todos-chat{
  height:26px !important;
  min-height:26px !important;
  max-height:26px !important;
  font-size:9.5px !important;
  padding:0 6px !important;
  margin:0 !important;
  border-radius:9px !important;
}

#modalChatEmpresa .sala-activa-card{
  display:grid !important;
  grid-template-rows:14px minmax(0,1fr) !important;
  gap:5px !important;
  padding:8px !important;
  min-height:0 !important;
}

#modalChatEmpresa .sala-activa-card h3{
  font-size:10.5px !important;
  line-height:1 !important;
  margin:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#modalChatEmpresa .sala-activa-card .active-room,
#modalChatEmpresa .active-room{
  height:48px !important;
  min-height:48px !important;
  max-height:48px !important;
  padding:6px 7px !important;
  gap:6px !important;
  border-radius:9px !important;
  overflow:hidden !important;
}

#modalChatEmpresa .active-room strong{
  font-size:10.5px !important;
  line-height:1.05 !important;
}
#modalChatEmpresa .active-room span{
  font-size:8.8px !important;
  line-height:1.05 !important;
}

#modalChatEmpresa .actividad-card{
  display:grid !important;
  grid-template-rows:14px repeat(4,1fr) !important;
  gap:0 !important;
  padding:8px !important;
  min-height:0 !important;
  overflow:hidden !important;
}

#modalChatEmpresa .actividad-card h3{
  font-size:10.5px !important;
  line-height:1 !important;
  margin:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#modalChatEmpresa .actividad-card p{
  font-size:9px !important;
  line-height:1 !important;
  padding:2px 0 !important;
  margin:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:4px !important;
  align-items:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#modalChatEmpresa .actividad-card strong{
  font-size:9.5px !important;
}

@media (max-height:760px){
  #modalChatEmpresa .chat-right-panel{grid-template-rows:minmax(0,1fr) 68px 98px !important;gap:5px !important;}
  #modalChatEmpresa .right-card{padding:7px !important;}
  #modalChatEmpresa .users-online-card{grid-template-rows:22px 30px minmax(0,1fr) 24px !important;gap:4px !important;}
  #modalChatEmpresa .chat-persona-item,#modalChatEmpresa .persona-chat-card,#modalChatEmpresa .persona-chat-wa{height:38px !important;min-height:38px !important;max-height:38px !important;grid-template-columns:28px minmax(0,1fr) 7px !important;}
  #modalChatEmpresa .chat-persona-foto,#modalChatEmpresa .persona-chat-card img,#modalChatEmpresa .persona-chat-card .avatar,#modalChatEmpresa .persona-avatar{width:28px !important;height:28px !important;min-width:28px !important;min-height:28px !important;}
  #modalChatEmpresa .sala-activa-card .active-room,#modalChatEmpresa .active-room{height:42px !important;min-height:42px !important;max-height:42px !important;}
  #modalChatEmpresa .actividad-card p{font-size:8.5px !important;padding:1px 0 !important;}
}


/* ===== AJUSTE FINAL: TEMAS EN BARRA DE ESCRIBIR + LIMPIEZA RAIL ===== */
#modalChatEmpresa .chat-rail-wa .wa-rail-btn[title="Chat"],
#modalChatEmpresa .chat-rail-wa .wa-rail-btn[title="Usuarios"],
#modalChatEmpresa .chat-rail-wa .wa-rail-btn[title="Salas"]{
  display:none !important;
}

#modalChatEmpresa .chat-avatar-grupo,
#modalChatEmpresa #chatAvatarCanal{
  font-size:22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#ffffff !important;
  background:linear-gradient(135deg,rgba(18,180,255,.85),rgba(64,92,255,.72)) !important;
  box-shadow:0 0 22px rgba(42,183,255,.42), inset 0 0 16px rgba(255,255,255,.16) !important;
}

#modalChatEmpresa .chat-composer-pro,
#modalChatEmpresa .chat-composer-wa-real{
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease !important;
}
#modalChatEmpresa .chat-textarea-wa,
#modalChatEmpresa #chatTexto,
#modalChatEmpresa .btn-chat-icon,
#modalChatEmpresa #btnEnviarChat{
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,color .25s ease !important;
}

#modalChatEmpresa.chat-tema-metal .chat-composer-pro,
#modalChatEmpresa.chat-tema-metal .chat-composer-wa-real,
body.chat-tema-metal #modalChatEmpresa .chat-composer-pro,
body.chat-tema-metal #modalChatEmpresa .chat-composer-wa-real{
  background:linear-gradient(135deg,rgba(15,32,52,.92),rgba(35,52,70,.82)) !important;
  border-top:1px solid rgba(138,215,255,.32) !important;
  box-shadow:0 -12px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#modalChatEmpresa.chat-tema-carbono .chat-composer-pro,
#modalChatEmpresa.chat-tema-carbono .chat-composer-wa-real,
body.chat-tema-carbono #modalChatEmpresa .chat-composer-pro,
body.chat-tema-carbono #modalChatEmpresa .chat-composer-wa-real{
  background:linear-gradient(135deg,rgba(6,8,12,.96),rgba(20,24,32,.88)) !important;
  border-top:1px solid rgba(180,205,230,.22) !important;
  box-shadow:0 -12px 30px rgba(0,0,0,.48) !important;
}
#modalChatEmpresa.chat-tema-neon .chat-composer-pro,
#modalChatEmpresa.chat-tema-neon .chat-composer-wa-real,
body.chat-tema-neon #modalChatEmpresa .chat-composer-pro,
body.chat-tema-neon #modalChatEmpresa .chat-composer-wa-real{
  background:linear-gradient(135deg,rgba(0,18,42,.96),rgba(5,48,88,.86)) !important;
  border-top:1px solid rgba(0,210,255,.46) !important;
  box-shadow:0 -10px 34px rgba(0,178,255,.26) !important;
}
#modalChatEmpresa.chat-tema-tactico .chat-composer-pro,
#modalChatEmpresa.chat-tema-tactico .chat-composer-wa-real,
body.chat-tema-tactico #modalChatEmpresa .chat-composer-pro,
body.chat-tema-tactico #modalChatEmpresa .chat-composer-wa-real{
  background:linear-gradient(135deg,rgba(5,28,20,.96),rgba(14,55,35,.86)) !important;
  border-top:1px solid rgba(54,255,145,.35) !important;
  box-shadow:0 -10px 30px rgba(0,210,90,.16) !important;
}
#modalChatEmpresa.chat-tema-dorado .chat-composer-pro,
#modalChatEmpresa.chat-tema-dorado .chat-composer-wa-real,
body.chat-tema-dorado #modalChatEmpresa .chat-composer-pro,
body.chat-tema-dorado #modalChatEmpresa .chat-composer-wa-real{
  background:linear-gradient(135deg,rgba(36,25,8,.97),rgba(75,51,13,.86)) !important;
  border-top:1px solid rgba(255,204,102,.42) !important;
  box-shadow:0 -10px 30px rgba(255,190,75,.16) !important;
}
#modalChatEmpresa.chat-tema-glass .chat-composer-pro,
#modalChatEmpresa.chat-tema-glass .chat-composer-wa-real,
body.chat-tema-glass #modalChatEmpresa .chat-composer-pro,
body.chat-tema-glass #modalChatEmpresa .chat-composer-wa-real{
  background:rgba(245,250,255,.86) !important;
  border-top:1px solid rgba(30,90,140,.18) !important;
  box-shadow:0 -10px 30px rgba(40,90,130,.13) !important;
}
#modalChatEmpresa.chat-tema-glass #chatTexto,
body.chat-tema-glass #modalChatEmpresa #chatTexto{
  background:rgba(255,255,255,.92) !important;
  color:#102235 !important;
  border-color:rgba(40,105,160,.20) !important;
}

#modalChatEmpresa.chat-tema-neon #chatTexto,
body.chat-tema-neon #modalChatEmpresa #chatTexto{
  background:rgba(0,42,78,.78) !important;border-color:rgba(0,214,255,.42) !important;box-shadow:inset 0 0 18px rgba(0,194,255,.10) !important;
}
#modalChatEmpresa.chat-tema-carbono #chatTexto,
body.chat-tema-carbono #modalChatEmpresa #chatTexto{
  background:rgba(8,10,14,.86) !important;border-color:rgba(255,255,255,.14) !important;
}
#modalChatEmpresa.chat-tema-tactico #chatTexto,
body.chat-tema-tactico #modalChatEmpresa #chatTexto{
  background:rgba(7,36,24,.82) !important;border-color:rgba(50,255,150,.24) !important;
}
#modalChatEmpresa.chat-tema-dorado #chatTexto,
body.chat-tema-dorado #modalChatEmpresa #chatTexto{
  background:rgba(42,29,9,.84) !important;border-color:rgba(255,204,102,.28) !important;
}

#modalChatEmpresa.chat-tema-neon .btn-chat-icon,
body.chat-tema-neon #modalChatEmpresa .btn-chat-icon{background:rgba(0,154,255,.16)!important;border-color:rgba(0,214,255,.28)!important;color:#dffaff!important;}
#modalChatEmpresa.chat-tema-carbono .btn-chat-icon,
body.chat-tema-carbono #modalChatEmpresa .btn-chat-icon{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.13)!important;}
#modalChatEmpresa.chat-tema-tactico .btn-chat-icon,
body.chat-tema-tactico #modalChatEmpresa .btn-chat-icon{background:rgba(0,210,95,.13)!important;border-color:rgba(0,230,118,.25)!important;}
#modalChatEmpresa.chat-tema-dorado .btn-chat-icon,
body.chat-tema-dorado #modalChatEmpresa .btn-chat-icon{background:rgba(255,197,80,.13)!important;border-color:rgba(255,204,102,.25)!important;}
#modalChatEmpresa.chat-tema-glass .btn-chat-icon,
body.chat-tema-glass #modalChatEmpresa .btn-chat-icon{background:rgba(255,255,255,.85)!important;border-color:rgba(30,90,140,.16)!important;color:#19324a!important;}

#modalChatEmpresa.chat-tema-glass #btnEnviarChat,
body.chat-tema-glass #modalChatEmpresa #btnEnviarChat{color:white!important;}

/* ===== FUNCIONES REALES EN PANEL IZQUIERDO DEL CHAT ===== */
#modalChatEmpresa .chat-tool-panel{
  display:none !important;
  min-height:0 !important;
  height:100% !important;
  overflow:hidden auto !important;
}
#modalChatEmpresa .chat-tool-panel.activo{display:block !important;}
#modalChatEmpresa .chat-tool-list{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  margin-top:8px !important;
  min-height:0 !important;
}
#modalChatEmpresa .chat-action-card,
#modalChatEmpresa .chat-help-card,
#modalChatEmpresa .chat-file-row,
#modalChatEmpresa .chat-alert-row{
  width:100% !important;
  min-height:48px !important;
  border-radius:14px !important;
  border:1px solid rgba(132,218,255,.18) !important;
  background:rgba(255,255,255,.055) !important;
  color:#eaf8ff !important;
  display:grid !important;
  grid-template-columns:34px minmax(0,1fr) !important;
  align-items:center !important;
  gap:8px !important;
  padding:8px !important;
  text-decoration:none !important;
  text-align:left !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
}
#modalChatEmpresa .chat-action-card{cursor:pointer !important;}
#modalChatEmpresa .chat-action-card:hover,
#modalChatEmpresa .chat-action-card.activo,
#modalChatEmpresa .chat-file-row:hover{
  border-color:rgba(0,195,255,.50) !important;
  background:linear-gradient(135deg,rgba(0,178,255,.24),rgba(255,255,255,.06)) !important;
}
#modalChatEmpresa .chat-action-card.alerta.activo,
#modalChatEmpresa .chat-alert-row{
  border-color:rgba(255,72,88,.55) !important;
  background:linear-gradient(135deg,rgba(255,30,72,.22),rgba(255,255,255,.05)) !important;
}
#modalChatEmpresa .chat-action-card i,
#modalChatEmpresa .chat-file-row i,
#modalChatEmpresa .chat-alert-row i{
  width:32px !important;
  height:32px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:11px !important;
  background:rgba(255,255,255,.08) !important;
  font-style:normal !important;
  font-size:16px !important;
}
#modalChatEmpresa .chat-action-card strong,
#modalChatEmpresa .chat-help-card strong,
#modalChatEmpresa .chat-file-row strong,
#modalChatEmpresa .chat-alert-row strong{
  display:block !important;
  font-size:11px !important;
  line-height:1.05 !important;
  color:#fff !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#modalChatEmpresa .chat-action-card small,
#modalChatEmpresa .chat-help-card span,
#modalChatEmpresa .chat-file-row small,
#modalChatEmpresa .chat-alert-row small{
  display:block !important;
  font-size:8.5px !important;
  line-height:1.15 !important;
  color:rgba(232,248,255,.72) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#modalChatEmpresa .chat-alert-row p{
  margin:3px 0 0 !important;
  font-size:9px !important;
  line-height:1.2 !important;
  color:rgba(255,244,244,.88) !important;
  max-height:28px !important;
  overflow:hidden !important;
}
#modalChatEmpresa .chat-file-row.pendiente{
  border-color:rgba(255,205,74,.50) !important;
  background:linear-gradient(135deg,rgba(255,190,48,.18),rgba(255,255,255,.05)) !important;
}
#modalChatEmpresa .wa-rail-btn.activo{
  border-color:rgba(0,195,255,.55) !important;
  background:linear-gradient(135deg,rgba(0,174,255,.30),rgba(255,255,255,.07)) !important;
  box-shadow:0 0 18px rgba(0,174,255,.18) !important;
}
#modalChatEmpresa .wa-rail-btn[title="Alertas"] b.sin-alertas{display:none !important;}
#modalChatEmpresa .wa-rail-btn[title="Alertas"] b:not(.sin-alertas){display:inline-flex !important;}
#modalChatEmpresa .chat-tool-panel .nota{font-size:10px !important;line-height:1.25 !important;}
#modalChatEmpresa.chat-fondo-limpio .chat-action-card,
#modalChatEmpresa.chat-fondo-limpio .chat-help-card,
#modalChatEmpresa.chat-fondo-limpio .chat-file-row,
#modalChatEmpresa.chat-fondo-limpio .chat-alert-row{
  color:#102033 !important;
  background:rgba(255,255,255,.78) !important;
  border-color:rgba(58,102,142,.18) !important;
}
#modalChatEmpresa.chat-fondo-limpio .chat-action-card strong,
#modalChatEmpresa.chat-fondo-limpio .chat-help-card strong,
#modalChatEmpresa.chat-fondo-limpio .chat-file-row strong,
#modalChatEmpresa.chat-fondo-limpio .chat-alert-row strong{color:#0c1c2c !important;}
#modalChatEmpresa.chat-fondo-limpio .chat-action-card small,
#modalChatEmpresa.chat-fondo-limpio .chat-help-card span,
#modalChatEmpresa.chat-fondo-limpio .chat-file-row small,
#modalChatEmpresa.chat-fondo-limpio .chat-alert-row small{color:#42617c !important;}


/* ===== ALERTAS CON DURACION ===== */
.chat-alert-duration-box{
  display:grid;
  gap:7px;
  padding:10px 11px;
  margin:8px 0 10px;
  border-radius:16px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.11);
}
.chat-alert-duration-box label{
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  font-weight:800;
}
.chat-alert-duration-box select{
  width:100%;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(5,10,24,.78);
  color:#fff;
  padding:0 10px;
  outline:none;
  font-weight:800;
}
.chat-alert-duration-box small{
  font-size:10px;
  line-height:1.25;
  color:rgba(255,255,255,.58);
}
.chat-alert-row{
  align-items:flex-start !important;
}
.chat-alert-row small{
  display:block;
  margin:2px 0 5px;
  color:rgba(255,255,255,.62);
}
.chat-alert-close{
  margin-top:6px;
  height:28px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.07);
  color:#fff;
  border-radius:10px;
  padding:0 9px;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}
.chat-alert-close:hover{
  background:rgba(255,80,80,.18);
  border-color:rgba(255,80,80,.35);
}


/* ===== ALERTAS AVANZADAS FINAL ===== */
.chat-alert-duration-box select{
  min-height:38px !important;
  font-size:12px !important;
}
.chat-alert-row p{
  margin:4px 0 2px !important;
}
.chat-alert-close{
  white-space:nowrap;
}


/* ===== CHAT PRIVADO REAL FINAL ===== */
.chat-persona-info em{
  display:block;
  margin-top:3px;
  max-width:155px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-style:normal;
  font-size:10px;
  color:rgba(255,255,255,.48);
}
.chat-online-dot{
  color:#45ff9a !important;
  text-shadow:0 0 12px rgba(69,255,154,.75);
}
.chat-persona-foto-general{
  font-size:19px !important;
  letter-spacing:0 !important;
}
.chat-persona-item.activo{
  border-color:rgba(76,201,255,.55) !important;
  box-shadow:0 0 22px rgba(76,201,255,.18), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#chatTituloCanal{
  display:flex;
  align-items:center;
  gap:8px;
}


/* ===== WHATSAPP PRIVADO FINAL ===== */

.chat-message-own{
  margin-left:auto !important;
  border-radius:18px 18px 4px 18px !important;
}

.chat-message-other{
  margin-right:auto !important;
  border-radius:18px 18px 18px 4px !important;
}

.chat-message-own .chat-message-body{
  background:linear-gradient(135deg,#005c4b,#0b8f72) !important;
}

.chat-message-other .chat-message-body{
  background:linear-gradient(135deg,#1a2430,#202f3d) !important;
}

.chat-persona-item{
  transition:.25s ease;
}

.chat-persona-item:hover{
  transform:translateY(-1px);
}

.chat-persona-item.activo{
  background:rgba(76,201,255,.14) !important;
  border-color:rgba(76,201,255,.45) !important;
}

/* ===== REPARAR SUPER ADMIN CSS ===== */
.btn-reparar-super-admin{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:999999;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(135deg,#00d5ff,#006dff);
  color:white;
  border-radius:999px;
  padding:13px 18px;
  font-weight:900;
  letter-spacing:.02em;
  box-shadow:0 0 28px rgba(0,180,255,.38);
  cursor:pointer;
}
.btn-reparar-super-admin:hover{
  transform:translateY(-1px);
  box-shadow:0 0 38px rgba(0,180,255,.55);
}

/* ===== ELIMINAR USUARIOS SIN HISTORIAL CSS ===== */
.btn-eliminar-usuario-definitivo{
  margin-top:10px;
  border:1px solid rgba(255,80,80,.42);
  background:linear-gradient(135deg,rgba(255,58,58,.22),rgba(120,0,0,.24));
  color:#ffdede;
  border-radius:14px;
  padding:9px 12px;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}
.btn-eliminar-usuario-definitivo:hover{
  background:linear-gradient(135deg,rgba(255,58,58,.38),rgba(180,0,0,.35));
}


/* ===== VENCIMIENTOS INTEGRADOS PERFIL PERSONAL ===== */
.perfil-vencimientos-operativo,
.notificaciones-vencimientos-global{
  margin:16px 0;
  padding:16px;
  border-radius:22px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 45px rgba(0,0,0,.18);
}

.perfil-vencimientos-titulo,
.notificaciones-vencimientos-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:12px;
}

.perfil-vencimientos-titulo strong,
.notificaciones-vencimientos-head strong{
  display:block;
  color:#fff;
  font-size:15px;
}

.perfil-vencimientos-titulo span,
.notificaciones-vencimientos-head small,
.perfil-vencimientos-titulo small{
  color:rgba(255,255,255,.62);
  font-size:12px;
}

.panel-vencimientos-perfil{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
}

.vencimiento-card,
.notificacion-vencimiento{
  border-radius:16px;
  padding:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
}

.vencimiento-card strong,
.notificacion-vencimiento strong{
  display:block;
  color:#fff;
  font-size:13px;
}

.vencimiento-card span,
.notificacion-vencimiento span{
  display:block;
  color:rgba(255,255,255,.66);
  font-size:12px;
  margin-top:3px;
}

.vencimiento-card em{
  display:inline-flex;
  margin-top:9px;
  padding:5px 9px;
  border-radius:999px;
  font-style:normal;
  font-weight:900;
  font-size:11px;
}

.vencimiento-card small,
.notificacion-vencimiento small{
  display:block;
  margin-top:6px;
  color:rgba(255,255,255,.58);
  font-size:11px;
}

.vencimiento-card.vigente em,
.notificacion-vencimiento.vigente{
  background:rgba(0,180,90,.15);
  border-color:rgba(0,255,150,.22);
}

.vencimiento-card.por-vencer em,
.notificacion-vencimiento.por-vencer{
  background:rgba(255,170,0,.18);
  border-color:rgba(255,190,0,.30);
}

.vencimiento-card.vencido em,
.notificacion-vencimiento.vencido{
  background:rgba(255,60,60,.20);
  border-color:rgba(255,80,80,.35);
}

.vencimiento-card.sin-fecha em{
  background:rgba(120,130,150,.16);
  border-color:rgba(255,255,255,.12);
}

.notificaciones-vencimientos-lista{
  display:grid;
  gap:8px;
  max-height:170px;
  overflow:auto;
}


/* ===== GAFETE PREMIUM SOFTWARE ESM ===== */
.gafete-premium,
.gafete-colaborador{
  background: radial-gradient(circle at top,#07142f,#020816 80%);
  border:1px solid rgba(0,183,255,.35);
  border-radius:28px;
  box-shadow:0 0 40px rgba(0,183,255,.18);
  overflow:hidden;
}

.gafete-premium .empresa-logo{
  border-radius:22px;
  border:2px solid rgba(0,183,255,.45);
  box-shadow:0 0 25px rgba(0,183,255,.22);
}

.gafete-premium .foto-usuario{
  border-radius:24px;
  border:2px solid rgba(0,183,255,.55);
  box-shadow:0 0 28px rgba(0,183,255,.25);
}

.gafete-premium .id-colaborador{
  font-size:48px;
  font-weight:900;
  letter-spacing:2px;
  color:#ffffff;
  text-shadow:0 0 22px rgba(0,183,255,.55);
}

.gafete-premium .dato-box{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(0,183,255,.25);
  border-radius:18px;
  backdrop-filter:blur(10px);
}

.gafete-premium .estado-verificado{
  color:#00ff99;
  font-weight:900;
}

.gafete-premium .qr-panel{
  background:rgba(255,255,255,.04);
  border-radius:24px;
  border:1px solid rgba(0,183,255,.30);
}


/* ===== GAFETE FINAL FIX ESM ===== */
.gafete,
.gafete-premium,
.credencial-colaborador{
  background:linear-gradient(180deg,#04111f,#020814) !important;
  border-radius:24px;
  border:1px solid rgba(0,183,255,.22);
  overflow:hidden;
}

.gafete .foto-usuario,
.credencial-colaborador .foto-usuario{
  border-radius:20px;
  border:2px solid rgba(0,183,255,.45);
  box-shadow:0 0 22px rgba(0,183,255,.18);
}

.gafete .logo-empresa,
.credencial-colaborador .logo-empresa{
  border-radius:20px;
  border:2px solid rgba(0,183,255,.32);
  background:rgba(255,255,255,.03);
}

.gafete .qr-box,
.credencial-colaborador .qr-box{
  background:#fff;
  border-radius:22px;
  padding:14px;
  border:2px solid rgba(0,183,255,.35);
}

.gafete .titulo-colaborador,
.credencial-colaborador .titulo-colaborador{
  color:#fff;
  font-weight:900;
  letter-spacing:1px;
}

.gafete .empresa-subtitulo,
.credencial-colaborador .empresa-subtitulo{
  color:#18b7ff;
  font-weight:700;
}

.gafete .dato-box,
.credencial-colaborador .dato-box{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(0,183,255,.18);
  border-radius:18px;
}


/* ===== GAFETE PREMIUM REAL FINAL ===== */
.modal-gafetes-premium-real{
  max-width: 1220px !important;
}

.gafete-panel-premium{
  display:grid !important;
  grid-template-columns: 290px 1fr !important;
  gap:22px !important;
  align-items:start !important;
}

.gafetes-preview-premium{
  display:grid !important;
  grid-template-columns: minmax(380px, 1fr) minmax(380px, 1fr) !important;
  gap:28px !important;
  align-items:stretch !important;
}

.gafete-pro-card{
  position:relative !important;
  width:100% !important;
  min-height:650px !important;
  padding:28px !important;
  border-radius:28px !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(0,140,255,.20), transparent 34%),
    radial-gradient(circle at 70% 45%, rgba(0,213,255,.12), transparent 40%),
    linear-gradient(180deg,#061326 0%,#020817 100%) !important;
  border:1px solid rgba(0,190,255,.45) !important;
  box-shadow:0 0 38px rgba(0,160,255,.20), inset 0 1px 0 rgba(255,255,255,.08) !important;
  color:white !important;
}

.gafete-pro-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-radial-gradient(circle at 72% 28%, rgba(0,195,255,.18) 0 1px, transparent 2px 14px),
    linear-gradient(120deg, transparent, rgba(0,160,255,.06), transparent);
  opacity:.65;
  pointer-events:none;
}

.gafete-pro-card > *{
  position:relative;
  z-index:2;
}

.gafete-pro-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:22px;
}

.gafete-pro-top h3{
  margin:0;
  font-size:27px;
  letter-spacing:.20em;
  font-weight:900;
  line-height:1.05;
}

.gafete-pro-top p{
  margin:7px 0 0;
  color:#00bfff;
  font-size:16px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.gafete-chip-empresa{
  padding:9px 18px;
  border-radius:999px;
  border:1px solid rgba(0,190,255,.45);
  color:#dff7ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  background:rgba(0,80,180,.20);
}

.gafete-pro-media{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:22px;
  margin-bottom:22px;
}

.gafete-foto-pro,
.gafete-logo-empresa-pro{
  height:250px;
  border-radius:22px;
  border:2px solid rgba(0,190,255,.50);
  background:rgba(255,255,255,.035);
  box-shadow:0 0 28px rgba(0,190,255,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.gafete-foto-pro img,
.gafete-logo-empresa-pro img,
.gafete-back-logo-empresa-premium img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.gafete-logo-empresa-pro img,
.gafete-back-logo-empresa-premium img{
  object-fit:contain;
  padding:18px;
}

#gafeteFotoPlaceholder,
#gafeteLogoEmpresaTexto,
#gafeteBackLogoEmpresaTexto{
  color:#dff7ff;
  font-weight:900;
  letter-spacing:.08em;
}

.gafete-pro-row{
  display:grid;
  grid-template-columns:58px 1fr auto;
  align-items:center;
  gap:16px;
  min-height:78px;
  padding:13px 16px;
  margin-bottom:10px;
  border-radius:18px;
  border:1px solid rgba(0,190,255,.30);
  background:rgba(0,15,40,.58);
}

.gafete-pro-row i{
  width:44px;
  height:44px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(120,210,255,.40);
  color:#8fe6ff;
  font-style:normal;
  font-size:22px;
}

.gafete-pro-row small{
  display:block;
  color:#00bfff;
  font-size:13px;
  font-weight:900;
  letter-spacing:.05em;
}

.gafete-pro-row strong{
  display:block;
  color:white;
  font-size:24px;
  font-weight:900;
  margin-top:4px;
}

.gafete-id-principal strong{
  font-size:38px !important;
  letter-spacing:.04em;
  text-shadow:0 0 18px rgba(0,190,255,.38);
}

.gafete-id-principal b{
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  color:#4ddcff;
  font-size:32px;
  border:1px solid rgba(0,190,255,.35);
  box-shadow:0 0 22px rgba(0,190,255,.22);
}

.gafete-pro-hidden-name{
  display:block;
  margin-top:18px;
  padding:12px 16px;
  text-align:center;
  border-radius:16px;
  border:1px solid rgba(77,220,255,.35);
  background:rgba(8,18,35,.82);
  color:#ffffff;
  font-size:22px;
  font-weight:800;
  letter-spacing:.04em;
  box-shadow:0 0 18px rgba(0,190,255,.18);
}

.gafete-pro-back{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.gafete-back-logo-empresa-premium{
  width:260px;
  height:115px;
  border-radius:20px;
  margin:0 auto 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.gafete-pro-back h3{
  margin:0 0 18px;
  font-size:25px;
  letter-spacing:.18em;
  font-weight:900;
}

.qr-marco-premium{
  width:310px;
  height:310px;
  padding:18px;
  border-radius:26px;
  background:white;
  border:3px solid rgba(0,174,255,.80);
  box-shadow:0 0 38px rgba(0,174,255,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
}

.qr-marco-premium canvas{
  width:260px !important;
  height:260px !important;
}

.gafete-qr-text strong{
  display:block;
  font-size:18px;
  color:white;
}

.gafete-qr-text span{
  display:block;
  color:rgba(255,255,255,.75);
  font-size:15px;
  margin-top:4px;
}

.gafete-back-info{
  margin-top:26px;
  padding-top:22px;
  width:80%;
  border-top:1px solid rgba(0,190,255,.35);
}

.gafete-back-info strong{
  display:block;
  font-size:30px;
  color:white;
}

.gafete-back-info span{
  display:block;
  font-size:20px;
  color:#00bfff;
  margin-top:4px;
  font-weight:800;
}

.gafete-verificado-line{
  margin-top:auto;
  width:86%;
  display:grid;
  grid-template-columns:auto auto 1fr;
  gap:15px;
  align-items:center;
  padding-top:22px;
  border-top:1px solid rgba(0,190,255,.28);
}

.gafete-verificado-line b{
  font-size:28px;
}

.gafete-verificado-line strong{
  color:#00ff99;
  font-size:16px;
  font-weight:900;
}

.gafete-verificado-line span{
  color:rgba(255,255,255,.70);
  font-size:15px;
  text-align:left;
}

@media(max-width:1100px){
  .gafete-panel-premium{grid-template-columns:1fr !important;}
  .gafetes-preview-premium{grid-template-columns:1fr !important;}
}


/* ===== CORRECCION REAL: LOGO EMPRESA EN FRENTE Y GAFETE COMPACTO ===== */
.modal-gafetes-premium-real,
.modal-gafetes{
  width:min(96vw,1180px) !important;
  max-width:1180px !important;
  max-height:88vh !important;
  overflow-y:auto !important;
}

.gafete-panel-premium{
  display:grid !important;
  grid-template-columns:260px minmax(0,1fr) !important;
  gap:16px !important;
  align-items:start !important;
}

.gafetes-preview-premium{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(330px, 420px)) !important;
  gap:18px !important;
  justify-content:center !important;
  align-items:start !important;
  overflow:visible !important;
}

.gafete-pro-card{
  width:420px !important;
  max-width:420px !important;
  height:560px !important;
  min-height:560px !important;
  padding:18px !important;
  box-sizing:border-box !important;
  border-radius:24px !important;
  overflow:hidden !important;
}

/* Arriba: colaborador + empresa */
.gafete-pro-top{
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  margin-bottom:12px !important;
}

.gafete-pro-top h3{
  font-size:20px !important;
  letter-spacing:.16em !important;
  line-height:1.05 !important;
  margin:0 !important;
}

.gafete-pro-top p{
  font-size:12px !important;
  margin:4px 0 0 !important;
  color:#18c8ff !important;
}

.gafete-chip-empresa{
  font-size:10px !important;
  padding:7px 12px !important;
  border-radius:999px !important;
}

/* Foto colaborador izquierda y logo empresa derecha */
.gafete-pro-media{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:12px !important;
  margin-bottom:12px !important;
}

.gafete-foto-pro,
.gafete-logo-empresa-pro{
  display:flex !important;
  height:145px !important;
  min-height:145px !important;
  border-radius:18px !important;
  align-items:center !important;
  justify-content:center !important;
}

.gafete-foto-pro img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block;
}

.gafete-logo-empresa-pro img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  padding:10px !important;
  display:block;
}

/* Filas */
.gafete-pro-row{
  min-height:58px !important;
  padding:8px 10px !important;
  margin-bottom:8px !important;
  grid-template-columns:40px 1fr auto !important;
  gap:10px !important;
  border-radius:15px !important;
}

.gafete-pro-row i{
  width:32px !important;
  height:32px !important;
  font-size:16px !important;
  border-radius:10px !important;
}

.gafete-pro-row small{
  font-size:10px !important;
  line-height:1.1 !important;
}

.gafete-pro-row strong{
  font-size:17px !important;
  line-height:1.1 !important;
}

.gafete-id-principal strong{
  font-size:28px !important;
  white-space:nowrap !important;
}

.gafete-id-principal b{
  width:40px !important;
  height:40px !important;
  font-size:24px !important;
  border-radius:12px !important;
}

/* Atrás: logo empresa arriba, QR centrado */
.gafete-pro-back{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
}

.gafete-back-logo-empresa-premium{
  display:flex !important;
  width:220px !important;
  height:80px !important;
  margin:0 auto 16px !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

.gafete-back-logo-empresa-premium img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  padding:8px !important;
}

.gafete-pro-back h3{
  font-size:19px !important;
  margin:0 0 12px !important;
  letter-spacing:.16em !important;
}

.qr-marco-premium{
  width:240px !important;
  height:240px !important;
  padding:12px !important;
  margin:0 auto 12px !important;
  border-radius:22px !important;
}

.qr-marco-premium canvas,
#gafeteQrCanvas{
  width:210px !important;
  height:210px !important;
  background:#fff !important;
  border-radius:10px !important;
}

.gafete-qr-text strong{
  font-size:15px !important;
}

.gafete-qr-text span{
  font-size:12px !important;
}

.gafete-back-info{
  margin-top:12px !important;
  padding-top:12px !important;
  width:85% !important;
}

.gafete-back-info strong{
  font-size:22px !important;
}

.gafete-back-info span{
  font-size:15px !important;
}

.gafete-verificado-line{
  margin-top:auto !important;
  padding-top:12px !important;
  width:90% !important;
  gap:8px !important;
}

.gafete-verificado-line strong,
.gafete-verificado-line span{
  font-size:12px !important;
}

/* evitar que reglas anteriores oculten el logo frontal */
.gafete-logo-empresa-pro{
  opacity:1 !important;
  visibility:visible !important;
}

@media(max-width:1050px){
  .gafete-panel-premium{grid-template-columns:1fr !important;}
  .gafetes-preview-premium{grid-template-columns:1fr !important;}
  .gafete-pro-card{width:100% !important; max-width:430px !important; margin:auto !important;}
}


/* ===== QR FINAL REAL FIX ===== */

.qr-marco-premium{
    width:250px !important;
    height:250px !important;
    background:#fff !important;
    border-radius:24px !important;
    padding:12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    margin:18px auto !important;
}

#gafeteQrCanvas{
    width:220px !important;
    height:220px !important;
    background:#fff !important;
    border-radius:12px !important;
    display:block !important;
}

.gafete-qr-text{
    text-align:center !important;
    margin-top:10px !important;
}

.gafete-qr-text strong{
    color:#fff !important;
    font-size:15px !important;
    display:block !important;
}

.gafete-qr-text span{
    color:rgba(255,255,255,.75) !important;
    font-size:11px !important;
    display:block !important;
    margin-top:4px !important;
}



/* ===== FIX DEFINITIVO PARTE TRASERA GAFETE ===== */
.gafetes-preview-premium,
.gafetes-preview-wrap{
  align-items:start !important;
  overflow:visible !important;
}

.gafete-back-final-card{
  width:420px !important;
  max-width:420px !important;
  height:560px !important;
  min-height:560px !important;
  padding:22px !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:0 !important;
  text-align:center !important;
  overflow:hidden !important;
  position:relative !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at center, rgba(0,180,255,.18), transparent 48%),
    linear-gradient(180deg,#061326,#020817) !important;
  border:1px solid rgba(0,190,255,.45) !important;
  box-shadow:0 0 35px rgba(0,160,255,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.gafete-back-final-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    repeating-radial-gradient(circle at 50% 38%, rgba(0,200,255,.16) 0 1px, transparent 2px 14px) !important;
  opacity:.6 !important;
  pointer-events:none !important;
}

.gafete-back-final-card > *{
  position:relative !important;
  z-index:2 !important;
}

.gafete-back-company-logo{
  width:220px !important;
  height:78px !important;
  min-height:78px !important;
  margin:0 auto 18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:18px !important;
  border:1px solid rgba(0,190,255,.35) !important;
  background:rgba(255,255,255,.035) !important;
  overflow:hidden !important;
}

.gafete-back-company-logo img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  padding:8px !important;
  display:block;
}

#gafeteBackLogoEmpresaTexto{
  color:#e8f8ff !important;
  font-weight:900 !important;
  letter-spacing:.10em !important;
  font-size:13px !important;
}

.gafete-back-title-final{
  margin:0 0 16px !important;
  padding:0 !important;
  color:#ffffff !important;
  font-size:21px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.18em !important;
  text-align:center !important;
}

.qr-final-box{
  width:246px !important;
  height:246px !important;
  min-width:246px !important;
  min-height:246px !important;
  max-width:246px !important;
  max-height:246px !important;
  padding:13px !important;
  margin:0 auto 14px !important;
  border-radius:24px !important;
  background:#ffffff !important;
  border:3px solid rgba(0,180,255,.8) !important;
  box-shadow:0 0 35px rgba(0,180,255,.28) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.qr-final-box canvas,
#gafeteQrCanvas{
  width:220px !important;
  height:220px !important;
  min-width:220px !important;
  min-height:220px !important;
  max-width:220px !important;
  max-height:220px !important;
  display:block !important;
  background:#ffffff !important;
  border-radius:8px !important;
  position:static !important;
  margin:0 !important;
  padding:0 !important;
}

.qr-final-caption{
  width:100% !important;
  margin:0 0 15px !important;
  padding:0 !important;
  text-align:center !important;
}

.qr-final-caption strong{
  display:block !important;
  color:#ffffff !important;
  font-size:15px !important;
  line-height:1.1 !important;
  font-weight:900 !important;
}

.qr-final-caption span{
  display:block !important;
  color:rgba(255,255,255,.74) !important;
  font-size:12px !important;
  line-height:1.1 !important;
  margin-top:5px !important;
}

.gafete-back-person-final{
  width:82% !important;
  margin:0 auto 0 !important;
  padding-top:13px !important;
  border-top:1px solid rgba(0,190,255,.35) !important;
  text-align:center !important;
}

.gafete-back-person-final strong{
  display:block !important;
  color:white !important;
  font-size:23px !important;
  line-height:1.1 !important;
  font-weight:900 !important;
}

.gafete-back-person-final span{
  display:block !important;
  color:#00bfff !important;
  font-size:15px !important;
  font-weight:800 !important;
  margin-top:4px !important;
}

.gafete-back-footer-final{
  width:88% !important;
  margin-top:auto !important;
  padding-top:13px !important;
  border-top:1px solid rgba(0,190,255,.28) !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:16px !important;
  text-align:center !important;
}

.gafete-back-footer-final strong{
  color:#00ff99 !important;
  font-size:13px !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}

.gafete-back-footer-final span{
  color:rgba(255,255,255,.72) !important;
  font-size:12px !important;
  white-space:nowrap !important;
}

/* eliminar estilos viejos que montaban texto encima del QR */
.gafete-back-info,
.gafete-qr-text,
.gafete-verificado-line,
.gafete-back-logo-empresa-premium,
.gafete-back-header,
.gafete-back-logo-esm,
.gafete-back-diagonal,
.gafete-atras .hecho-softwareesm{
  display:none !important;
}

@media(max-width:1050px){
  .gafete-back-final-card{
    width:100% !important;
    max-width:430px !important;
    margin:auto !important;
  }
}


/* ===== FINAL QR FIX DEFINITIVO ===== */

.gafetes-preview-premium{
  align-items:flex-start !important;
}

.gafete-pro-back{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  overflow:hidden !important;
}

.gafete-pro-back h3{
  margin-top:10px !important;
  margin-bottom:16px !important;
}

.qr-marco-premium{
  position:relative !important;
  width:260px !important;
  height:260px !important;
  min-width:260px !important;
  min-height:260px !important;
  max-width:260px !important;
  max-height:260px !important;
  padding:14px !important;
  margin:0 auto 14px !important;
  background:#ffffff !important;
  border-radius:24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  z-index:3 !important;
}

#gafeteQrCanvas{
  width:220px !important;
  height:220px !important;
  min-width:220px !important;
  min-height:220px !important;
  max-width:220px !important;
  max-height:220px !important;
  background:#ffffff !important;
  border-radius:12px !important;
  display:block !important;
  position:relative !important;
  z-index:4 !important;
}

.gafete-qr-text{
  position:relative !important;
  z-index:5 !important;
  width:100% !important;
  text-align:center !important;
  margin-top:4px !important;
}

.gafete-qr-text strong{
  display:block !important;
  color:#fff !important;
  font-size:15px !important;
}

.gafete-qr-text span{
  display:block !important;
  color:rgba(255,255,255,.75) !important;
  font-size:11px !important;
  margin-top:3px !important;
}



/* ===== LIMPIEZA DEFINITIVA QR GAFETE ESM ===== */

/* La parte trasera queda en columna, sin textos encima del QR */
#gafeteAtras.gafete-pro-back,
#gafeteAtras.gafete-atras,
.gafete-pro-back{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
  overflow:hidden !important;
  padding:18px !important;
  box-sizing:border-box !important;
}

/* Título limpio */
#gafeteBackTitulo{
  position:relative !important;
  z-index:2 !important;
  margin:10px 0 14px 0 !important;
  padding:0 !important;
  width:100% !important;
  text-align:center !important;
  transform:none !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
}

/* Cuadro QR blanco: solo canvas adentro */
.qr-marco,
.qr-marco-premium,
.qr-marco-limpio-esm{
  position:relative !important;
  z-index:5 !important;
  width:252px !important;
  height:252px !important;
  min-width:252px !important;
  min-height:252px !important;
  max-width:252px !important;
  max-height:252px !important;
  padding:16px !important;
  margin:0 auto 14px auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#ffffff !important;
  border-radius:24px !important;
  border:3px solid rgba(0,210,255,.75) !important;
  box-shadow:0 0 24px rgba(0,210,255,.30) !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

/* Nada dentro del QR puede quedar flotando excepto el canvas */
.qr-marco > *:not(canvas),
.qr-marco-premium > *:not(canvas),
.qr-marco-limpio-esm > *:not(canvas){
  display:none !important;
}

/* Canvas real */
#gafeteQrCanvas{
  position:relative !important;
  z-index:6 !important;
  display:block !important;
  width:220px !important;
  height:220px !important;
  min-width:220px !important;
  min-height:220px !important;
  max-width:220px !important;
  max-height:220px !important;
  background:#ffffff !important;
  border-radius:8px !important;
  transform:none !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  margin:0 !important;
  padding:0 !important;
}

/* El texto va debajo, nunca encima */
.gafete-qr-text{
  position:relative !important;
  z-index:2 !important;
  width:100% !important;
  margin:2px 0 12px 0 !important;
  padding:0 !important;
  text-align:center !important;
  transform:none !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
}

.gafete-qr-text strong{
  display:block !important;
  color:#ffffff !important;
  font-size:15px !important;
  line-height:1.2 !important;
  margin:0 !important;
}

.gafete-qr-text span{
  display:block !important;
  color:rgba(255,255,255,.72) !important;
  font-size:11px !important;
  line-height:1.2 !important;
  margin-top:4px !important;
}

/* Nombre y verificado abajo */
.gafete-back-info,
.gafete-verificado-line{
  position:relative !important;
  z-index:2 !important;
  transform:none !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
}

/* Evita que cualquier texto viejo se monte sobre el QR */
.gafete-pro-back .hecho-softwareesm,
.gafete-back-diagonal{
  pointer-events:none !important;
}



/* ===== BOTON GENERAR QR GAFETE PREMIUM CSS ===== */
.btn-generar-qr-gafete{
  position:relative !important;
  z-index:10 !important;
  margin:6px auto 8px auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(0,210,255,.45) !important;
  background:linear-gradient(135deg,#00d7ff,#006dff) !important;
  color:#fff !important;
  font-weight:900 !important;
  border-radius:999px !important;
  padding:9px 18px !important;
  cursor:pointer !important;
  box-shadow:0 0 18px rgba(0,160,255,.30) !important;
}

.qr-marco,
.qr-marco-premium,
.qr-marco-limpio-esm{
  width:252px !important;
  height:252px !important;
  padding:16px !important;
  background:#fff !important;
  border-radius:24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  margin:0 auto 8px auto !important;
}

#gafeteQrCanvas{
  width:220px !important;
  height:220px !important;
  background:#fff !important;
  display:block !important;
}


/* ===== FIX POSICION QR SIN MOVER TARJETA ===== */
.gafete-pro-back{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  overflow:hidden !important;
}

.gafete-pro-back h3,
#gafeteBackTitulo{
  margin:8px 0 10px 0 !important;
  padding:0 !important;
  text-align:center !important;
  position:relative !important;
  z-index:2 !important;
}

.qr-marco,
.qr-marco-premium,
.qr-marco-limpio-esm{
  position:relative !important;
  z-index:5 !important;
  width:230px !important;
  height:230px !important;
  min-width:230px !important;
  min-height:230px !important;
  max-width:230px !important;
  max-height:230px !important;
  padding:10px !important;
  margin:8px auto 8px auto !important;
  background:#ffffff !important;
  border-radius:22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

#gafeteQrCanvas{
  position:relative !important;
  z-index:6 !important;
  width:205px !important;
  height:205px !important;
  min-width:205px !important;
  min-height:205px !important;
  max-width:205px !important;
  max-height:205px !important;
  display:block !important;
  background:#ffffff !important;
  margin:0 !important;
  padding:0 !important;
}

.btn-generar-qr-gafete{
  margin:5px auto 6px auto !important;
  padding:8px 16px !important;
  font-size:12px !important;
}

.gafete-qr-text{
  margin:4px 0 8px 0 !important;
  text-align:center !important;
  position:relative !important;
  z-index:2 !important;
}

.gafete-back-info{
  margin-top:8px !important;
  padding-top:10px !important;
}

.gafete-verificado-line{
  margin-top:auto !important;
  padding-top:10px !important;
}


/* ===== FIX FINAL NOMBRE Y BOTON QR ===== */
.gafete-pro-hidden-name,
#gafeteNombre{
  display:block !important;
  position:relative !important;
  z-index:5 !important;
  color:#ffffff !important;
  font-size:18px !important;
  font-weight:900 !important;
  margin:6px 0 8px 0 !important;
  text-align:left !important;
}

.btn-generar-qr-gafete{
  position:relative !important;
  z-index:10 !important;
  margin:6px auto 8px auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(0,210,255,.45) !important;
  background:linear-gradient(135deg,#00d7ff,#006dff) !important;
  color:#fff !important;
  font-weight:900 !important;
  border-radius:999px !important;
  padding:8px 16px !important;
  font-size:12px !important;
  cursor:pointer !important;
  box-shadow:0 0 18px rgba(0,160,255,.30) !important;
}

.qr-marco,
.qr-marco-premium,
.qr-marco-limpio-esm{
  width:252px !important;
  height:252px !important;
  padding:16px !important;
  background:#ffffff !important;
  border-radius:24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  margin:0 auto 8px auto !important;
  box-sizing:border-box !important;
}

.qr-marco > *:not(canvas),
.qr-marco-premium > *:not(canvas),
.qr-marco-limpio-esm > *:not(canvas){
  display:none !important;
}

#gafeteQrCanvas{
  width:220px !important;
  height:220px !important;
  min-width:220px !important;
  min-height:220px !important;
  max-width:220px !important;
  max-height:220px !important;
  background:#ffffff !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
}

.qr-final-caption,
.gafete-qr-text{
  position:relative !important;
  z-index:2 !important;
  text-align:center !important;
  margin:4px 0 8px 0 !important;
}

/* ===== SOFTWARE ESM QR URGENTE REAL: SIN INTERNET, CENTRADO Y SIN BOTÓN ===== */
.gafete-back-final-card,
#gafeteAtras{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  padding: 18px 22px 14px !important;
  box-sizing: border-box !important;
}
#gafeteBackTitulo,
.gafete-back-title-final{
  width: 100% !important;
  text-align: center !important;
  margin: 10px 0 18px !important;
  line-height: 1.1 !important;
}
.qr-marco,
.qr-marco-premium,
.qr-marco-limpio-esm{
  width: 250px !important;
  height: 250px !important;
  min-width: 250px !important;
  min-height: 250px !important;
  max-width: 250px !important;
  max-height: 250px !important;
  padding: 15px !important;
  margin: 0 auto 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
}
#gafeteQrCanvas{
  width: 220px !important;
  height: 220px !important;
  min-width: 220px !important;
  min-height: 220px !important;
  display: block !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#btnGenerarQrGafete,
.btn-generar-qr-gafete{
  display: none !important;
}
.qr-final-caption{
  width: 100% !important;
  text-align: center !important;
  margin: 0 0 8px !important;
  line-height: 1.15 !important;
  position: static !important;
  transform: none !important;
}
.gafete-back-person-final{
  width: 100% !important;
  text-align: center !important;
  margin: 2px 0 6px !important;
  line-height: 1.05 !important;
  position: static !important;
  transform: none !important;
}
.gafete-back-footer-final{
  width: 100% !important;
  text-align: center !important;
  margin-top: auto !important;
  padding-top: 6px !important;
  position: static !important;
  transform: none !important;
}

/* ===== FIX FINAL QR ESCANEABLE SOFTWARE ESM ===== */
#btnGenerarQrGafete,
.btn-generar-qr-gafete{
  display:none !important;
}

.qr-marco,
.qr-marco-premium,
.qr-marco-limpio-esm{
  width:270px !important;
  height:270px !important;
  min-width:270px !important;
  min-height:270px !important;
  max-width:270px !important;
  max-height:270px !important;
  padding:10px !important;
  margin:4px auto 10px auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#ffffff !important;
  border-radius:24px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.qr-marco > *:not(canvas):not(#gafeteQrImg),
.qr-marco-premium > *:not(canvas):not(#gafeteQrImg),
.qr-marco-limpio-esm > *:not(canvas):not(#gafeteQrImg){
  display:none !important;
}

#gafeteQrCanvas,
#gafeteQrImg{
  width:240px !important;
  height:240px !important;
  min-width:240px !important;
  min-height:240px !important;
  max-width:240px !important;
  max-height:240px !important;
  display:block;
  background:#ffffff !important;
  border-radius:8px !important;
  margin:0 auto !important;
  padding:0 !important;
  object-fit:contain !important;
  image-rendering:auto !important;
}

.gafete-back-person-final{
  margin-top:2px !important;
  padding-top:8px !important;
}

.gafete-back-person-final strong{
  font-size:20px !important;
  line-height:1.05 !important;
}

.gafete-back-person-final span{
  font-size:13px !important;
  margin-top:2px !important;
}

/* ===== FIX FINAL QR ESCANEABLE SOFTWARE ESM ===== */
#btnGenerarQrGafete,
.btn-generar-qr-gafete{
  display:none !important;
}

.qr-marco,
.qr-marco-premium,
.qr-marco-limpio-esm{
  width:270px !important;
  height:270px !important;
  min-width:270px !important;
  min-height:270px !important;
  max-width:270px !important;
  max-height:270px !important;
  padding:10px !important;
  margin:4px auto 10px auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#ffffff !important;
  border-radius:24px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.qr-marco > *:not(canvas):not(#gafeteQrImg),
.qr-marco-premium > *:not(canvas):not(#gafeteQrImg),
.qr-marco-limpio-esm > *:not(canvas):not(#gafeteQrImg){
  display:none !important;
}

#gafeteQrCanvas,
#gafeteQrImg{
  width:240px !important;
  height:240px !important;
  min-width:240px !important;
  min-height:240px !important;
  max-width:240px !important;
  max-height:240px !important;
  display:block;
  background:#ffffff !important;
  border-radius:8px !important;
  margin:0 auto !important;
  padding:0 !important;
  object-fit:contain !important;
  image-rendering:auto !important;
}

.gafete-back-person-final{
  margin-top:2px !important;
  padding-top:8px !important;
}

.gafete-back-person-final strong{
  font-size:20px !important;
  line-height:1.05 !important;
}

.gafete-back-person-final span{
  font-size:13px !important;
  margin-top:2px !important;
}

/* ===== LICENCIAS ESM - CONTROL DE EMPRESAS ===== */
.licencias-toolbar{display:grid;grid-template-columns:1fr auto;gap:12px;margin:14px 0 18px;align-items:center}
.licencias-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;max-height:62vh;overflow:auto;padding:4px}
.licencia-card{border:1px solid rgba(0,255,255,.22);border-radius:22px;padding:16px;background:linear-gradient(145deg,rgba(3,14,35,.92),rgba(9,28,58,.72));box-shadow:0 18px 45px rgba(0,0,0,.28),inset 0 0 24px rgba(0,255,255,.05)}
.licencia-card-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}.licencia-card-top h3{margin:0;color:#fff}.licencia-card-top p{margin:4px 0 0}.licencia-grid-info{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.licencia-grid-info span{border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px;background:rgba(255,255,255,.04);font-size:12px;color:#dcecff}.licencia-grid-info strong{display:block;color:#7df7ff;font-size:11px;margin-bottom:4px}.licencia-acciones{display:flex;flex-wrap:wrap;gap:8px}.empresa-item-card-pro small{display:block;color:#9fb6d8;margin-top:4px}.badge-estado.estado-activo{background:rgba(0,255,150,.18);color:#7dffcf;border:1px solid rgba(0,255,150,.35)}.badge-estado.estado-inactivo{background:rgba(255,180,0,.18);color:#ffd27d;border:1px solid rgba(255,180,0,.35)}.badge-estado.estado-eliminado{background:rgba(255,80,100,.18);color:#ff9aaa;border:1px solid rgba(255,80,100,.35)}
@media(max-width:720px){.licencias-toolbar{grid-template-columns:1fr}.licencia-grid-info{grid-template-columns:1fr}}

/* ===== NOTIFICACIONES ESM - LICENCIAS ===== */
.notificaciones-wrapper-esm{position:relative;display:inline-flex;align-items:center;justify-content:center}
.btn-notificaciones-esm{position:relative;width:44px;height:44px;border-radius:14px;border:1px solid rgba(0,255,255,.25);background:linear-gradient(145deg,rgba(6,20,46,.92),rgba(12,42,80,.7));color:#fff;font-size:20px;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.28), inset 0 0 18px rgba(0,255,255,.06)}
.btn-notificaciones-esm:hover{transform:translateY(-1px);border-color:rgba(0,255,255,.55);box-shadow:0 0 24px rgba(0,180,255,.24)}
.contador-notificaciones-esm{position:absolute;top:-7px;right:-7px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#ff304d;color:#fff;font-weight:900;font-size:12px;display:flex;align-items:center;justify-content:center;border:2px solid rgba(8,18,40,.95);box-shadow:0 0 16px rgba(255,48,77,.75);animation:pulsoNotificacionEsm 1.2s infinite}
@keyframes pulsoNotificacionEsm{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
.panel-notificaciones-esm{position:absolute;top:54px;right:0;width:min(390px,92vw);max-height:520px;overflow:auto;background:linear-gradient(145deg,rgba(5,16,38,.98),rgba(8,34,65,.96));border:1px solid rgba(0,255,255,.24);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 35px rgba(0,180,255,.14);z-index:99999;padding:0;color:#fff}
.panel-notificaciones-header-esm{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;background:rgba(8,22,48,.98);border-bottom:1px solid rgba(255,255,255,.10);z-index:1}
.panel-notificaciones-header-esm strong{font-size:16px}
.panel-notificaciones-header-esm button{border:1px solid rgba(0,255,180,.35);background:rgba(0,255,180,.10);color:#7dffcf;border-radius:12px;padding:8px 10px;font-weight:800;cursor:pointer}
.lista-notificaciones-esm{display:grid;gap:10px;padding:12px}
.notificacion-item-esm{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045)}
.notificacion-item-esm.no-leida{box-shadow:inset 3px 0 0 #ffcc33;background:rgba(255,204,51,.075)}
.notificacion-item-esm.critica.no-leida{box-shadow:inset 3px 0 0 #ff3659;background:rgba(255,54,89,.09)}
.notificacion-item-esm.leida{opacity:.55}
.notificacion-item-esm span{font-size:22px;line-height:1.2}
.notificacion-item-esm strong{display:block;color:#fff;margin-bottom:3px}
.notificacion-item-esm p{margin:0 0 4px;color:#dbeaff;font-size:13px;line-height:1.3}
.notificacion-item-esm small{color:#8fb1d9;font-size:12px}
.notificacion-vacia-esm{padding:18px;text-align:center;color:#9fb6d8}
.licencia-fechas-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.licencia-fechas-grid label{font-size:11px;color:#9fefff;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.licencia-fechas-grid input{width:100%;margin-top:6px;border:1px solid rgba(0,255,255,.18);background:rgba(0,0,0,.25);color:#fff;border-radius:12px;padding:9px;outline:none;box-sizing:border-box}
@media(max-width:720px){.panel-notificaciones-esm{right:-80px}.licencia-fechas-grid{grid-template-columns:1fr}}


/* ===== FIX CAMPANA NOTIFICACIONES VISIBLE EN DASHBOARD ===== */
.notificaciones-wrapper-esm.esm-notif-dashboard{
  position:fixed !important;
  top:24px !important;
  right:28px !important;
  z-index:2147483000 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  pointer-events:auto !important;
}
.notificaciones-wrapper-esm.esm-notif-dashboard::before{
  content:"Notificaciones";
  margin-right:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(24,216,255,.22);
  background:rgba(3,14,35,.78);
  color:#dff8ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.notificaciones-wrapper-esm.esm-notif-dashboard .btn-notificaciones-esm{
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
  border-radius:18px !important;
  font-size:24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(24,216,255,.48) !important;
  background:linear-gradient(135deg,rgba(24,216,255,.24),rgba(168,85,255,.22),rgba(4,13,31,.95)) !important;
  box-shadow:0 0 28px rgba(24,216,255,.25),0 18px 45px rgba(0,0,0,.35) !important;
}
.notificaciones-wrapper-esm.esm-notif-dashboard .panel-notificaciones-esm{
  position:fixed !important;
  top:84px !important;
  right:28px !important;
  left:auto !important;
  width:min(420px,calc(100vw - 34px)) !important;
  z-index:2147483001 !important;
}
@media(max-width:760px){
  .notificaciones-wrapper-esm.esm-notif-dashboard{top:14px !important;right:14px !important}
  .notificaciones-wrapper-esm.esm-notif-dashboard::before{display:none !important}
  .notificaciones-wrapper-esm.esm-notif-dashboard .panel-notificaciones-esm{top:74px !important;right:14px !important}
}

/* ===== HORARIO - GUIA VISUAL DESDE COMPLETAR PERFIL ===== */
.modal-horario .tabla-horario-body{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:14px;
  margin-top:14px;
}
.horario-card-pro{
  border:1px solid rgba(0,255,255,.18);
  background:linear-gradient(145deg,rgba(6,18,35,.92),rgba(10,35,58,.78));
  border-radius:18px;
  padding:16px;
  box-shadow:0 18px 42px rgba(0,0,0,.32), inset 0 0 18px rgba(0,255,255,.05);
}
.horario-card-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:14px;
}
.horario-card-head strong{
  display:block;
  color:#eaffff;
  font-size:1.02rem;
}
.horario-card-head span{
  display:block;
  color:rgba(224,247,255,.72);
  font-size:.82rem;
  margin-top:4px;
}
.horario-card-head em{
  color:#00111a;
  background:linear-gradient(135deg,#7cf7ff,#a7ffdf);
  border-radius:999px;
  padding:6px 10px;
  font-style:normal;
  font-weight:800;
  white-space:nowrap;
}
.horario-grid-mini{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.horario-grid-mini span{
  border:1px solid rgba(124,247,255,.14);
  background:rgba(255,255,255,.045);
  border-radius:14px;
  padding:10px;
  color:#f5ffff;
  min-height:58px;
}
.horario-grid-mini b{
  display:block;
  color:#7cf7ff;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:5px;
}
@media (max-width:700px){
  .horario-grid-mini{grid-template-columns:1fr;}
}


/* ===== CORRECCION REAL: CUADRO PREMIUM PARA NOMBRE DEL USUARIO EN GAFETE ===== */
.gafete-nombre-cuadro-premium{
  width:100% !important;
  max-width:238px !important;
  min-height:62px !important;
  padding:10px 14px !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.26) !important;
  background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(0,0,0,.20)) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.28), inset 0 0 24px rgba(255,255,255,.07) !important;
  backdrop-filter:blur(12px) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  overflow:hidden !important;
}
.gafete-nombre-cuadro-premium small{
  display:block !important;
  margin:0 0 4px 0 !important;
  color:rgba(255,255,255,.72) !important;
  font-size:9px !important;
  font-weight:900 !important;
  letter-spacing:1.6px !important;
  text-transform:uppercase !important;
  line-height:1 !important;
}
#gafeteNombrePrincipal{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  color:#ffffff !important;
  font-size:18px !important;
  font-weight:950 !important;
  line-height:1.12 !important;
  letter-spacing:.4px !important;
  text-transform:uppercase !important;
  text-align:center !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:normal !important;
  word-break:break-word !important;
  text-shadow:0 2px 12px rgba(0,0,0,.55) !important;
}
#gafeteChipEmpresa.gafete-chip-empresa{
  flex:0 0 auto !important;
  align-self:flex-start !important;
  margin-left:8px !important;
  font-size:10px !important;
}
/* El nombre técnico oculto se conserva para lógica interna, pero no se usa como diseño visible principal. */
.gafete-pro-hidden-name#gafeteNombre{
  display:none !important;
}

/* ===== FIX FINAL REAL: ACOMODO DEL NOMBRE DEL USUARIO EN GAFETE ===== */
#gafeteFrente .gafete-pro-top{
  position:relative !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  min-height:86px !important;
  padding:8px 54px 10px 54px !important;
  margin:0 0 14px 0 !important;
  box-sizing:border-box !important;
}

#gafeteFrente .gafete-nombre-cuadro-premium{
  width:100% !important;
  max-width:285px !important;
  min-height:72px !important;
  padding:11px 18px !important;
  margin:0 auto !important;
  border-radius:20px !important;
  border:1.5px solid rgba(120,225,255,.55) !important;
  background:linear-gradient(145deg, rgba(7,27,55,.96), rgba(20,80,130,.58), rgba(255,255,255,.08)) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.34), 0 0 26px rgba(0,190,255,.18), inset 0 1px 0 rgba(255,255,255,.20) !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  overflow:hidden !important;
}

#gafeteFrente .gafete-nombre-cuadro-premium small{
  margin:0 0 6px 0 !important;
  color:rgba(210,246,255,.86) !important;
  font-size:8.5px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:1.8px !important;
  text-transform:uppercase !important;
}

#gafeteFrente #gafeteNombrePrincipal{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  color:#ffffff !important;
  font-size:17px !important;
  font-weight:950 !important;
  line-height:1.12 !important;
  letter-spacing:.6px !important;
  text-align:center !important;
  text-transform:uppercase !important;
  white-space:normal !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  word-break:break-word !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  text-shadow:0 2px 12px rgba(0,0,0,.70) !important;
}

#gafeteFrente #gafeteChipEmpresa.gafete-chip-empresa{
  position:absolute !important;
  top:8px !important;
  right:6px !important;
  z-index:3 !important;
  font-size:9px !important;
  padding:6px 9px !important;
  max-width:52px !important;
  text-align:center !important;
  white-space:nowrap !important;
}

/* ===== FIX FINAL GAFETE ESM: nombre/activo y parte inferior completa ===== */
.gafete-frente.gafete-pro-card{
  min-height: 690px !important;
  height: auto !important;
  padding: 22px !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
}

.gafete-frente .gafete-pro-top{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

.gafete-frente .gafete-nombre-cuadro-premium{
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(77,220,255,.46) !important;
  background: linear-gradient(135deg, rgba(4,25,55,.88), rgba(0,82,135,.24)) !important;
  box-shadow: 0 0 22px rgba(0,190,255,.20), inset 0 0 18px rgba(255,255,255,.055) !important;
}

.gafete-frente .gafete-nombre-cuadro-premium small{
  display:block !important;
  margin-bottom: 5px !important;
  color:#63ddff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
}

.gafete-frente .gafete-nombre-cuadro-premium h3{
  margin: 0 !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  letter-spacing: .08em !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  text-shadow: 0 0 18px rgba(0,190,255,.40) !important;
}

.gafete-frente .gafete-chip-empresa{
  align-self: center !important;
  margin: 0 !important;
  padding: 7px 18px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  background: rgba(0,80,180,.30) !important;
}

.gafete-frente .gafete-pro-media{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

.gafete-frente .gafete-foto-pro,
.gafete-frente .gafete-logo-empresa-pro{
  height: 185px !important;
  border-radius: 20px !important;
}

.gafete-frente .gafete-pro-row{
  grid-template-columns: 42px 1fr auto !important;
  min-height: 54px !important;
  padding: 9px 12px !important;
  margin-bottom: 7px !important;
  border-radius: 15px !important;
  gap: 11px !important;
}

.gafete-frente .gafete-pro-row i{
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  font-size: 17px !important;
}

.gafete-frente .gafete-pro-row small{
  font-size: 10px !important;
  line-height: 1.1 !important;
}

.gafete-frente .gafete-pro-row strong{
  font-size: 17px !important;
  line-height: 1.12 !important;
  margin-top: 2px !important;
  word-break: break-word !important;
}

.gafete-frente .gafete-id-principal strong{
  font-size: 25px !important;
}

.gafete-frente .gafete-id-principal b{
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  font-size: 21px !important;
}

.gafete-frente .gafete-pro-hidden-name{
  display: none !important;
}

/* =========================================================
   FIX REAL FINAL GAFETE - DISEÑO FUTURISTA SIN CORTES
   Solo corrige visual del gafete: nombre, ACTIVO y parte inferior.
   ========================================================= */
#gafeteFrente.gafete-frente.gafete-pro-card{
  width: 360px !important;
  height: 640px !important;
  min-height: 640px !important;
  max-height: none !important;
  padding: 18px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 82% 10%, rgba(69, 220, 255, .34), transparent 24%),
    radial-gradient(circle at 12% 88%, rgba(33, 255, 201, .18), transparent 30%),
    linear-gradient(145deg, #03111f 0%, #06233f 48%, #02101d 100%) !important;
  border: 1px solid rgba(112, 235, 255, .42) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.55), 0 0 38px rgba(0,190,255,.22), inset 0 0 0 1px rgba(255,255,255,.07) !important;
}

#gafeteFrente.gafete-frente.gafete-pro-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 34%, rgba(67, 220, 255, .18), transparent 36%) !important;
  background-size: 26px 26px, 26px 26px, 100% 100% !important;
  opacity:.92 !important;
}

#gafeteFrente.gafete-frente.gafete-pro-card > *{
  position: relative !important;
  z-index: 2 !important;
}

#gafeteFrente .gafete-pro-top{
  width:100% !important;
  min-height: 104px !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0 4px 0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap: 8px !important;
  box-sizing:border-box !important;
}

#gafeteFrente .gafete-nombre-cuadro-premium{
  width: 100% !important;
  max-width: 100% !important;
  min-height: 72px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 11px 14px !important;
  box-sizing: border-box !important;
  border-radius: 18px !important;
  border: 1px solid rgba(104, 235, 255, .58) !important;
  background: linear-gradient(135deg, rgba(3, 25, 50, .92), rgba(0, 108, 170, .36), rgba(255,255,255,.07)) !important;
  box-shadow: 0 0 24px rgba(0,190,255,.22), inset 0 0 22px rgba(255,255,255,.06) !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  overflow:hidden !important;
}

#gafeteFrente .gafete-nombre-cuadro-premium small{
  margin: 0 0 5px 0 !important;
  color: #78ecff !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 1.7px !important;
  text-transform: uppercase !important;
}

#gafeteFrente #gafeteNombrePrincipal{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  color:#ffffff !important;
  font-size: 18px !important;
  line-height: 1.12 !important;
  font-weight: 950 !important;
  letter-spacing: .7px !important;
  text-transform: uppercase !important;
  text-align:center !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  word-break:break-word !important;
  overflow-wrap:anywhere !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.65), 0 0 18px rgba(0,195,255,.38) !important;
}

#gafeteFrente #gafeteChipEmpresa.gafete-chip-empresa,
#gafeteFrente .gafete-chip-empresa{
  position: static !important;
  align-self: center !important;
  margin: 0 !important;
  max-width: none !important;
  padding: 5px 18px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 1.4px !important;
  color: #bffcff !important;
  background: rgba(0, 129, 166, .22) !important;
  border: 1px solid rgba(111, 237, 255, .38) !important;
  box-shadow: 0 0 16px rgba(0, 205, 255, .18) !important;
  white-space: nowrap !important;
}

#gafeteFrente .gafete-pro-media{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin: 0 0 6px 0 !important;
  flex: 0 0 auto !important;
}

#gafeteFrente .gafete-foto-pro,
#gafeteFrente .gafete-logo-empresa-pro{
  height: 142px !important;
  min-height: 142px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(113, 234, 255, .42) !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow: inset 0 0 18px rgba(255,255,255,.055), 0 0 20px rgba(0,190,255,.13) !important;
  overflow:hidden !important;
}

#gafeteFrente .gafete-foto-pro img,
#gafeteFrente .gafete-logo-empresa-pro img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

#gafeteFrente .gafete-logo-empresa-pro img{
  object-fit:contain !important;
  padding: 12px !important;
  box-sizing:border-box !important;
}

#gafeteFrente .gafete-pro-row{
  width:100% !important;
  min-height: 45px !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  box-sizing:border-box !important;
  border-radius: 14px !important;
  display:grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  gap: 9px !important;
  align-items:center !important;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035)) !important;
  border: 1px solid rgba(102, 230, 255, .24) !important;
  box-shadow: inset 0 0 16px rgba(255,255,255,.035) !important;
  overflow:hidden !important;
}

#gafeteFrente .gafete-pro-row i{
  width: 28px !important;
  height: 28px !important;
  border-radius: 9px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size: 14px !important;
  background: rgba(0,190,255,.12) !important;
  color: #8ff3ff !important;
}

#gafeteFrente .gafete-pro-row small{
  display:block !important;
  font-size: 8.5px !important;
  line-height: 1 !important;
  letter-spacing: 1.1px !important;
  color: rgba(188, 242, 255, .75) !important;
  font-weight: 900 !important;
  margin: 0 0 3px 0 !important;
  text-transform: uppercase !important;
}

#gafeteFrente .gafete-pro-row strong{
  display:block !important;
  min-width: 0 !important;
  font-size: 14px !important;
  line-height: 1.08 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

#gafeteFrente .gafete-id-principal strong{
  font-size: 18px !important;
  letter-spacing: .08em !important;
}

#gafeteFrente .gafete-id-principal b{
  width: 28px !important;
  height: 28px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background: rgba(42, 255, 180, .16) !important;
  color: #7dffd7 !important;
}

#gafeteFrente .gafete-pro-hidden-name#gafeteNombre{
  display:none !important;
}

/* Mantener el reverso estable, solo evitar cortes en vista previa/impresión */
#gafeteAtras.gafete-card{
  height: 640px !important;
  min-height: 640px !important;
  overflow: hidden !important;
}

@media print{
  #gafeteFrente.gafete-frente.gafete-pro-card,
  #gafeteAtras.gafete-card{
    height: 640px !important;
    min-height: 640px !important;
    overflow: hidden !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
}

/* =========================================================
   FIX REAL 12-05 - GAFETE SIN CORTES + ACTIVO SEPARADO
   Trabajado sobre el ZIP enviado. Solo ajuste visual del gafete.
   ========================================================= */
.gafetes-preview-wrap.gafetes-preview-premium{
  align-items:start !important;
  overflow:visible !important;
}

#gafeteFrente.gafete-frente.gafete-pro-card{
  width: 360px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 18px 18px 20px !important;
  overflow: visible !important;
  gap: 9px !important;
  background:
    radial-gradient(circle at 82% 10%, rgba(72, 218, 255, .35), transparent 24%),
    radial-gradient(circle at 14% 88%, rgba(51, 255, 205, .20), transparent 30%),
    linear-gradient(145deg, #03111f 0%, #062947 50%, #020b15 100%) !important;
  border: 1px solid rgba(112, 235, 255, .46) !important;
  box-shadow: 0 24px 62px rgba(0,0,0,.52), 0 0 38px rgba(0,190,255,.22), inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

#gafeteFrente .gafete-pro-top{
  min-height: 0 !important;
  height: auto !important;
  margin: 0 0 8px 0 !important;
  gap: 10px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}

#gafeteFrente .gafete-nombre-cuadro-premium{
  min-height: 76px !important;
  padding: 12px 14px !important;
  margin: 0 !important;
}

#gafeteFrente #gafeteChipEmpresa.gafete-chip-empresa,
#gafeteFrente .gafete-chip-empresa{
  position: static !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin: 0 auto 2px auto !important;
  padding: 6px 20px !important;
  transform:none !important;
  clear: both !important;
  z-index: 4 !important;
}

#gafeteFrente .gafete-pro-media{
  margin: 0 0 8px 0 !important;
  gap: 12px !important;
}

#gafeteFrente .gafete-foto-pro,
#gafeteFrente .gafete-logo-empresa-pro{
  height: 132px !important;
  min-height: 132px !important;
}

#gafeteFrente .gafete-pro-row{
  min-height: 43px !important;
  padding: 7px 10px !important;
  margin: 0 !important;
  gap: 9px !important;
}

#gafeteFrente .gafete-pro-row small{
  font-size: 8px !important;
  margin-bottom: 2px !important;
}

#gafeteFrente .gafete-pro-row strong{
  font-size: 13px !important;
  line-height: 1.05 !important;
}

#gafeteFrente .gafete-id-principal strong{
  font-size: 17px !important;
}

#gafeteAtras.gafete-card{
  height: auto !important;
  min-height: 640px !important;
  max-height: none !important;
  overflow: visible !important;
}

@media print{
  #gafeteFrente.gafete-frente.gafete-pro-card,
  #gafeteAtras.gafete-card{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
}

/* =========================================================
   SOFTWARE ESM - GAFETE NEON PREMIUM FINAL
   SOLO VISUAL DEL GAFETE: colores/fondo/bordes/paneles.
   No modifica módulos, lógica, QR, Firebase ni datos.
   ========================================================= */

/* Vista donde se muestran frente y reverso */
.gafetes-preview-wrap.gafetes-preview-premium{
  background:
    radial-gradient(circle at 50% 8%, rgba(0, 153, 255, .22), transparent 35%),
    radial-gradient(circle at 4% 70%, rgba(0, 229, 255, .16), transparent 32%),
    linear-gradient(135deg, rgba(2, 9, 19, .98), rgba(0, 20, 43, .98)) !important;
  border: 1px solid rgba(0, 174, 255, .28) !important;
  box-shadow: inset 0 0 35px rgba(0, 153, 255, .12), 0 0 45px rgba(0, 0, 0, .55) !important;
}

/* Frente y reverso: mismo diseño base, estilo azul neon */
#gafeteFrente.gafete-frente.gafete-pro-card,
#gafeteAtras.gafete-card.gafete-back-final-card{
  background:
    linear-gradient(135deg, rgba(0, 153, 255, .20) 0 1px, transparent 1px 100%) 0 0/42px 42px,
    linear-gradient(45deg, rgba(0, 204, 255, .12) 0 1px, transparent 1px 100%) 0 0/54px 54px,
    radial-gradient(circle at 50% 8%, rgba(0, 170, 255, .35), transparent 20%),
    radial-gradient(circle at 8% 74%, rgba(0, 102, 255, .35), transparent 26%),
    radial-gradient(circle at 92% 80%, rgba(0, 229, 255, .22), transparent 26%),
    linear-gradient(180deg, #061426 0%, #020914 45%, #000711 100%) !important;
  border: 1.5px solid rgba(157, 231, 255, .86) !important;
  border-radius: 24px !important;
  box-shadow:
    0 0 0 1px rgba(0, 153, 255, .28),
    0 0 28px rgba(0, 132, 255, .42),
    0 0 70px rgba(0, 132, 255, .20),
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    inset 0 0 45px rgba(0, 132, 255, .18) !important;
  color: #fff !important;
}

#gafeteFrente.gafete-frente.gafete-pro-card::before,
#gafeteAtras.gafete-card.gafete-back-final-card::before{
  content:"" !important;
  position:absolute !important;
  inset: 10px !important;
  pointer-events:none !important;
  border-radius: 19px !important;
  background:
    linear-gradient(135deg, rgba(0, 195, 255, .72), transparent 18%) top left/46% 46% no-repeat,
    linear-gradient(225deg, rgba(0, 195, 255, .72), transparent 18%) top right/46% 46% no-repeat,
    linear-gradient(45deg, rgba(0, 114, 255, .82), transparent 22%) bottom left/48% 48% no-repeat,
    linear-gradient(315deg, rgba(0, 229, 255, .82), transparent 22%) bottom right/48% 48% no-repeat !important;
  opacity: .95 !important;
  filter: drop-shadow(0 0 10px rgba(0, 174, 255, .55)) !important;
  z-index: 0 !important;
}

#gafeteFrente.gafete-frente.gafete-pro-card > *,
#gafeteAtras.gafete-card.gafete-back-final-card > *{
  position:relative !important;
  z-index:2 !important;
}

/* Nombre y estado */
#gafeteFrente .gafete-nombre-cuadro-premium{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 6px 8px 2px !important;
  margin-top: 6px !important;
  min-height: auto !important;
  text-align:center !important;
}

#gafeteFrente .gafete-nombre-cuadro-premium small{
  display:none !important;
}

#gafeteFrente .gafete-nombre-cuadro-premium h3,
#gafeteFrente #gafeteNombrePrincipal{
  color:#ffffff !important;
  text-shadow: 0 0 12px rgba(0, 153, 255, .72), 0 2px 0 rgba(0,0,0,.45) !important;
  letter-spacing:.08em !important;
  font-weight: 1000 !important;
  text-transform: uppercase !important;
}

#gafeteFrente #gafeteChipEmpresa.gafete-chip-empresa,
#gafeteFrente .gafete-chip-empresa{
  position: static !important;
  display:inline-flex !important;
  margin: 2px auto 8px auto !important;
  padding: 6px 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #47a7ff, #006eff) !important;
  border: 1px solid rgba(196, 239, 255, .95) !important;
  color:#ffffff !important;
  box-shadow: 0 0 14px rgba(0, 132, 255, .70), inset 0 0 10px rgba(255,255,255,.20) !important;
  font-weight: 950 !important;
}

/* Foto y logo */
#gafeteFrente .gafete-foto-pro,
#gafeteFrente .gafete-logo-empresa-pro,
#gafeteAtras .gafete-back-company-logo,
#gafeteAtras .gafete-qr-box-final{
  background: rgba(0, 12, 27, .72) !important;
  border: 1px solid rgba(0, 195, 255, .78) !important;
  box-shadow: 0 0 18px rgba(0, 132, 255, .35), inset 0 0 22px rgba(0, 132, 255, .12) !important;
}

/* Filas de información */
#gafeteFrente .gafete-pro-row{
  background: linear-gradient(90deg, rgba(0, 21, 45, .92), rgba(0, 12, 27, .88)) !important;
  border: 1px solid rgba(0, 153, 255, .70) !important;
  border-radius: 16px !important;
  box-shadow: 0 0 12px rgba(0, 132, 255, .22), inset 0 0 18px rgba(0, 132, 255, .12) !important;
}

#gafeteFrente .gafete-pro-row i,
#gafeteFrente .gafete-pro-row b{
  background: rgba(0, 26, 56, .95) !important;
  border: 1px solid rgba(0, 195, 255, .70) !important;
  color:#25c8ff !important;
  box-shadow: 0 0 12px rgba(0, 153, 255, .30) !important;
}

#gafeteFrente .gafete-pro-row small{
  color:#18c8ff !important;
  text-shadow: 0 0 8px rgba(0, 195, 255, .35) !important;
  letter-spacing:.07em !important;
}

#gafeteFrente .gafete-pro-row strong{
  color:#ffffff !important;
  text-shadow: 0 0 7px rgba(0, 132, 255, .28) !important;
}

/* Reverso QR */
#gafeteAtras .gafete-back-title-final,
#gafeteAtras .gafete-back-person-final strong{
  color:#ffffff !important;
  text-shadow: 0 0 12px rgba(0, 132, 255, .55) !important;
}

#gafeteAtras .gafete-back-note-final,
#gafeteAtras .gafete-back-footer-final,
#gafeteAtras .gafete-back-person-final span{
  color: rgba(238, 250, 255, .92) !important;
}

#gafeteAtras .gafete-qr-box-final{
  padding: 14px !important;
  border-radius: 20px !important;
}

#gafeteAtras #gafeteQrCanvas{
  background:#ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 0 20px rgba(255,255,255,.18) !important;
}

/* ===== FIX FINAL GAFETE: SOLO TAMANOS Y QUITAR LOGO GIGANTE ===== */
#modalGafetes .gafetes-preview-premium,
#modalGafetes .gafetes-preview-wrap{
  display:grid !important;
  grid-template-columns:420px 420px !important;
  gap:18px !important;
  justify-content:center !important;
  align-items:start !important;
  overflow:visible !important;
}

#modalGafetes #gafeteFrente,
#modalGafetes #gafeteAtras,
#modalGafetes .gafete-pro-card,
#modalGafetes .gafete-back-final-card{
  width:420px !important;
  max-width:420px !important;
  min-width:420px !important;
  height:560px !important;
  max-height:560px !important;
  min-height:560px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  border-radius:24px !important;
}

/* Quita el logo inmenso que aparece abajo/al cargar usuario */
#modalGafetes #gafeteBackLogoEsm,
#modalGafetes #gafeteBackLogoEsmTexto,
#modalGafetes .gafete-back-logo-esm,
#modalGafetes .gafete-back-diagonal,
#modalGafetes .hecho-softwareesm,
#modalGafetes .gafete-frente-fondo-texto,
#modalGafetes .gafete-atras::after{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  max-width:0 !important;
  max-height:0 !important;
}

/* El logo de empresa de atrás no debe agrandarse ni tapar el gafete */
#modalGafetes .gafete-back-company-logo{
  display:none !important;
}

#modalGafetes #gafeteAtras{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  padding:22px !important;
  text-align:center !important;
  background:
    radial-gradient(circle at 50% 108%, rgba(0,95,255,.44), transparent 28%),
    radial-gradient(circle at 50% 18%, rgba(0,183,255,.16), transparent 32%),
    linear-gradient(180deg,#061326 0%,#020817 100%) !important;
}

#modalGafetes #gafeteBackTitulo{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:100% !important;
  margin:18px 0 18px !important;
  font-size:22px !important;
  line-height:1 !important;
  letter-spacing:.16em !important;
  color:#fff !important;
  text-align:center !important;
}

#modalGafetes .qr-marco,
#modalGafetes .qr-marco-premium,
#modalGafetes .qr-marco-limpio-esm{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:252px !important;
  height:252px !important;
  min-width:252px !important;
  min-height:252px !important;
  max-width:252px !important;
  max-height:252px !important;
  margin:0 auto 16px !important;
  padding:16px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

#modalGafetes #gafeteQrCanvas,
#modalGafetes #gafeteQrImg{
  width:220px !important;
  height:220px !important;
  min-width:220px !important;
  min-height:220px !important;
  max-width:220px !important;
  max-height:220px !important;
  object-fit:contain !important;
  position:relative !important;
  top:auto !important;
  left:auto !important;
  transform:none !important;
  margin:0 !important;
}

#modalGafetes .qr-final-caption{
  margin:0 0 18px !important;
  padding:0 !important;
}

#modalGafetes .gafete-back-person-final{
  width:84% !important;
  margin:0 auto 0 !important;
  padding-top:16px !important;
  border-top:1px solid rgba(0,190,255,.35) !important;
}

#modalGafetes .gafete-back-footer-final{
  margin-top:auto !important;
  padding-top:14px !important;
  padding-bottom:2px !important;
}

/* Frente: mantiene el diseño pero evita cortes en la parte inferior */
#modalGafetes #gafeteFrente{
  padding:18px !important;
}
#modalGafetes .gafete-pro-hidden-name{
  display:none !important;
}
#modalGafetes .gafete-pro-row{
  min-height:56px !important;
  margin-bottom:8px !important;
}
#modalGafetes .gafete-foto-pro,
#modalGafetes .gafete-logo-empresa-pro{
  max-height:145px !important;
  overflow:hidden !important;
}
#modalGafetes .gafete-logo-empresa-pro img{
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
}

@media(max-width:1100px){
  #modalGafetes .gafetes-preview-premium,
  #modalGafetes .gafetes-preview-wrap{
    grid-template-columns:420px !important;
  }
}

/* ===== FIX FINAL: NOMBRE DEL USUARIO SIN CORTE =====
   Solo ajusta espacio del nombre en el frente del gafete.
   No cambia módulos, QR, Firebase, lógica ni estructura.
*/
#modalGafetes #gafeteFrente .gafete-pro-top{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:100% !important;
  min-height:92px !important;
  height:92px !important;
  margin:0 0 10px 0 !important;
  padding:0 !important;
  gap:6px !important;
  overflow:visible !important;
  z-index:5 !important;
}

#modalGafetes #gafeteFrente .gafete-nombre-cuadro-premium{
  width:100% !important;
  min-height:58px !important;
  height:58px !important;
  max-height:58px !important;
  margin:0 !important;
  padding:4px 12px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  z-index:6 !important;
}

#modalGafetes #gafeteFrente #gafeteNombrePrincipal{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  font-size:15px !important;
  line-height:1.05 !important;
  max-height:34px !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  word-break:break-word !important;
  overflow-wrap:anywhere !important;
  white-space:normal !important;
  text-align:center !important;
}

#modalGafetes #gafeteFrente #gafeteChipEmpresa.gafete-chip-empresa,
#modalGafetes #gafeteFrente .gafete-chip-empresa{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  margin:0 auto !important;
  padding:5px 16px !important;
  font-size:9px !important;
  line-height:1 !important;
  z-index:6 !important;
  flex:0 0 auto !important;
}

#modalGafetes #gafeteFrente .gafete-pro-media{
  position:relative !important;
  z-index:3 !important;
  margin:0 0 8px 0 !important;
  height:118px !important;
  min-height:118px !important;
  max-height:118px !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:12px !important;
  overflow:hidden !important;
}

#modalGafetes #gafeteFrente .gafete-foto-pro,
#modalGafetes #gafeteFrente .gafete-logo-empresa-pro{
  height:118px !important;
  min-height:118px !important;
  max-height:118px !important;
  overflow:hidden !important;
}

#modalGafetes #gafeteFrente .gafete-pro-row{
  min-height:39px !important;
  height:39px !important;
  max-height:39px !important;
  margin:0 0 6px 0 !important;
  padding:6px 10px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

#modalGafetes #gafeteFrente .gafete-pro-row strong{
  font-size:12px !important;
  line-height:1.05 !important;
  max-height:26px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
}

#modalGafetes #gafeteFrente .gafete-id-principal strong{
  font-size:15px !important;
  -webkit-line-clamp:1 !important;
}

/* =========================================================
   FIX REAL - TEMAS GAFETES APLICADOS AL FRENTE Y REVERSO
   Solo visual de gafetes. No toca módulos, QR ni lógica.
   ========================================================= */
#gafeteFrente.gafete-verde-neon, #gafeteAtras.gafete-verde-neon { --g1:#061426; --g2:#020914; --g3:#00e6ff; --g4:#006eff; --grgb:0,230,255; }
#gafeteFrente.gafete-azul-corporativo, #gafeteAtras.gafete-azul-corporativo { --g1:#071d3a; --g2:#020817; --g3:#41adff; --g4:#1b64ff; --grgb:65,173,255; }
#gafeteFrente.gafete-morado-premium, #gafeteAtras.gafete-morado-premium { --g1:#17072b; --g2:#050311; --g3:#bf5eff; --g4:#6d5cff; --grgb:191,94,255; }
#gafeteFrente.gafete-dorado-ejecutivo, #gafeteAtras.gafete-dorado-ejecutivo { --g1:#211707; --g2:#080602; --g3:#ffcd5f; --g4:#b77b2d; --grgb:255,205,95; }
#gafeteFrente.gafete-rojo-seguridad, #gafeteAtras.gafete-rojo-seguridad { --g1:#23070b; --g2:#090103; --g3:#ff4c5b; --g4:#b70c1d; --grgb:255,76,91; }
#gafeteFrente.gafete-negro-carbono, #gafeteAtras.gafete-negro-carbono { --g1:#111820; --g2:#030405; --g3:#8fb4c8; --g4:#263642; --grgb:143,180,200; }
#gafeteFrente.gafete-aqua-tech, #gafeteAtras.gafete-aqua-tech { --g1:#021d26; --g2:#020a13; --g3:#00e6ff; --g4:#0089ff; --grgb:0,230,255; }
#gafeteFrente.gafete-naranja-energy, #gafeteAtras.gafete-naranja-energy { --g1:#251006; --g2:#080301; --g3:#ff8e37; --g4:#ff4f1f; --grgb:255,142,55; }
#gafeteFrente.gafete-plateado-metal, #gafeteAtras.gafete-plateado-metal { --g1:#172332; --g2:#050911; --g3:#d2e6f5; --g4:#8795a2; --grgb:210,230,245; }
#gafeteFrente.gafete-azul-royal, #gafeteAtras.gafete-azul-royal { --g1:#08113a; --g2:#020618; --g3:#3368ff; --g4:#00c2ff; --grgb:51,104,255; }
#gafeteFrente.gafete-rosa-neon, #gafeteAtras.gafete-rosa-neon { --g1:#24061d; --g2:#08010a; --g3:#ff40d2; --g4:#ff2d75; --grgb:255,64,210; }
#gafeteFrente.gafete-midnight-blue, #gafeteAtras.gafete-midnight-blue { --g1:#071033; --g2:#010716; --g3:#4b74ff; --g4:#122a7a; --grgb:75,116,255; }
#gafeteFrente.gafete-emerald-security, #gafeteAtras.gafete-emerald-security { --g1:#031c12; --g2:#010905; --g3:#16dc80; --g4:#00a35b; --grgb:22,220,128; }
#gafeteFrente.gafete-titan-gray, #gafeteAtras.gafete-titan-gray { --g1:#11151c; --g2:#05070a; --g3:#96a0af; --g4:#4b5563; --grgb:150,160,175; }
#gafeteFrente.gafete-blanco-premium, #gafeteAtras.gafete-blanco-premium { --g1:#152235; --g2:#07101d; --g3:#ffffff; --g4:#a8d8ff; --grgb:255,255,255; }

#modalGafetes #gafeteFrente.gafete-card,
#modalGafetes #gafeteAtras.gafete-card{
  background:
    linear-gradient(135deg, rgba(var(--grgb,0,230,255), .18) 0 1px, transparent 1px 100%) 0 0/42px 42px,
    linear-gradient(45deg, rgba(var(--grgb,0,230,255), .10) 0 1px, transparent 1px 100%) 0 0/54px 54px,
    radial-gradient(circle at 50% 8%, rgba(var(--grgb,0,230,255), .34), transparent 20%),
    radial-gradient(circle at 8% 74%, color-mix(in srgb, var(--g4, #006eff) 50%, transparent), transparent 26%),
    radial-gradient(circle at 92% 80%, rgba(var(--grgb,0,230,255), .22), transparent 26%),
    linear-gradient(180deg, var(--g1,#061426) 0%, var(--g2,#020914) 100%) !important;
  border-color: color-mix(in srgb, var(--g3,#00e6ff) 82%, white) !important;
  box-shadow:
    0 0 0 1px rgba(var(--grgb,0,230,255), .28),
    0 0 28px rgba(var(--grgb,0,230,255), .42),
    0 0 70px rgba(var(--grgb,0,230,255), .20),
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 0 45px rgba(var(--grgb,0,230,255), .18) !important;
}

#modalGafetes #gafeteFrente.gafete-card::before,
#modalGafetes #gafeteAtras.gafete-card::before{
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--g3,#00e6ff) 78%, transparent), transparent 18%) top left/46% 46% no-repeat,
    linear-gradient(225deg, color-mix(in srgb, var(--g3,#00e6ff) 78%, transparent), transparent 18%) top right/46% 46% no-repeat,
    linear-gradient(45deg, color-mix(in srgb, var(--g4,#006eff) 82%, transparent), transparent 22%) bottom left/48% 48% no-repeat,
    linear-gradient(315deg, color-mix(in srgb, var(--g3,#00e6ff) 82%, transparent), transparent 22%) bottom right/48% 48% no-repeat !important;
  filter: drop-shadow(0 0 10px rgba(var(--grgb,0,230,255), .55)) !important;
}

#modalGafetes #gafeteFrente .gafete-chip-empresa,
#modalGafetes #gafeteFrente #gafeteChipEmpresa.gafete-chip-empresa{
  background: linear-gradient(180deg, var(--g3,#00e6ff), var(--g4,#006eff)) !important;
  border-color: color-mix(in srgb, var(--g3,#00e6ff) 78%, white) !important;
  box-shadow: 0 0 14px rgba(var(--grgb,0,230,255), .70), inset 0 0 10px rgba(255,255,255,.20) !important;
}

#modalGafetes #gafeteFrente .gafete-pro-row,
#modalGafetes #gafeteFrente .gafete-foto-pro,
#modalGafetes #gafeteFrente .gafete-logo-empresa-pro,
#modalGafetes #gafeteAtras .qr-marco,
#modalGafetes #gafeteAtras .gafete-back-person-final,
#modalGafetes #gafeteAtras .gafete-back-footer-final{
  border-color: rgba(var(--grgb,0,230,255), .70) !important;
  box-shadow: 0 0 12px rgba(var(--grgb,0,230,255), .25), inset 0 0 18px rgba(var(--grgb,0,230,255), .12) !important;
}

#modalGafetes #gafeteFrente .gafete-pro-row i,
#modalGafetes #gafeteFrente .gafete-pro-row b{
  color: var(--g3,#00e6ff) !important;
  border-color: rgba(var(--grgb,0,230,255), .70) !important;
  box-shadow: 0 0 12px rgba(var(--grgb,0,230,255), .30) !important;
}

#modalGafetes #gafeteFrente .gafete-pro-row small,
#modalGafetes #gafeteFrente #gafeteNombrePrincipal,
#modalGafetes #gafeteAtras .gafete-back-title-final,
#modalGafetes #gafeteAtras .gafete-back-person-final strong{
  text-shadow: 0 0 12px rgba(var(--grgb,0,230,255), .65) !important;
}

#modalGafetes #gafeteFrente .gafete-pro-row small{
  color: var(--g3,#00e6ff) !important;
}


/* ===== PLANILLA PC - FORMATO TIPO EXCEL ===== */
.modal-planilla-pc{
  width:min(1400px,96vw);
  max-height:92vh;
  overflow:auto;
}
.planilla-toolbar{
  display:grid;
  grid-template-columns:repeat(4,minmax(160px,1fr)) auto;
  gap:12px;
  align-items:end;
  margin:14px 0;
}
.planilla-simbologia{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.94);
  color:#111827;
  border:1px solid rgba(15,23,42,.16);
  border-radius:14px;
  padding:10px 12px;
  margin-bottom:10px;
}
.planilla-simbologia strong{margin-right:8px;color:#0f172a;}
.simbolo{border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800;border:1px solid rgba(15,23,42,.14)}
.simbolo.extra{background:#fff7ed;color:#9a3412}.simbolo.ausencia{background:#fee2e2;color:#991b1b}.simbolo.incapacidad{background:#fef3c7;color:#92400e}.simbolo.especial{background:#dbeafe;color:#1e3a8a}
.planilla-meta-excel{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:0;
  background:#111827;
  color:#fff;
  border-radius:12px 12px 0 0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
}
.planilla-meta-excel span{
  padding:10px 12px;
  border-right:1px solid rgba(255,255,255,.18);
  font-weight:900;
  letter-spacing:.02em;
}
.planilla-scroll{
  width:100%;
  overflow:auto;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.22);
  border-radius:0 0 16px 16px;
  box-shadow:0 16px 40px rgba(0,0,0,.20);
}
.planilla-excel-table{
  width:100%;
  min-width:1180px;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:12px;
  color:#111827;
  background:#fff;
}
.planilla-excel-table th,.planilla-excel-table td{
  border:1px solid #1f2937;
  padding:7px 8px;
  vertical-align:middle;
  word-break:break-word;
}
.planilla-proyecto-row td{
  background:#e5e7eb;
  color:#111827;
  font-size:14px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:9px 10px;
}
.planilla-header-row th{
  background:#111827;
  color:#fff;
  text-align:center;
  font-weight:900;
}
.planilla-data-row:nth-child(even) td{background:#fafafa;}
.planilla-data-row:hover td{background:#e0f2fe;}
.planilla-data-row td:nth-child(1){width:90px;font-weight:800;}
.planilla-data-row td:nth-child(2){width:140px;}
.planilla-data-row td:nth-child(3){width:210px;font-weight:800;}
.planilla-data-row td:nth-child(4),.planilla-data-row td:nth-child(5){width:80px;text-align:center;font-weight:800;}
.planilla-data-row td:nth-child(6){width:115px;}
.planilla-data-row td:nth-child(7){width:260px;}
.planilla-data-row td:nth-child(8),.planilla-data-row td:nth-child(9),.planilla-data-row td:nth-child(10){width:105px;text-align:center;}
.planilla-data-row td:nth-child(11){width:110px;text-align:center;font-weight:800;}
.planilla-editable{background:#fff7ed!important;}
.planilla-relevante{background:#f8fafc!important;}
.planilla-estatus{font-weight:900;color:#0f172a;}
.planilla-empty{padding:28px!important;text-align:center;font-weight:800;color:#475569;background:#fff!important;}
.planilla-nota-final{margin-top:12px;}
@media(max-width:900px){.planilla-toolbar{grid-template-columns:1fr}.planilla-meta-excel{grid-template-columns:1fr}.modal-planilla-pc{width:98vw}}


/* ===== PLANILLA PC FULLSCREEN PRO - AJUSTE FINAL ===== */
#modalPlanilla.modal{
  align-items:stretch !important;
  justify-content:stretch !important;
  padding:0 !important;
  background:rgba(3,7,18,.82) !important;
}
#modalPlanilla .modal-planilla-pc{
  width:100vw !important;
  max-width:100vw !important;
  height:100vh !important;
  max-height:100vh !important;
  margin:0 !important;
  border-radius:0 !important;
  padding:22px 26px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  background:linear-gradient(135deg,#07111f 0%,#0b1b33 46%,#101827 100%) !important;
  color:#e5f3ff !important;
}
#modalPlanilla .modal-header-pro{
  flex:0 0 auto !important;
  border:1px solid rgba(56,189,248,.28) !important;
  background:linear-gradient(135deg,rgba(14,165,233,.18),rgba(15,23,42,.78)) !important;
  box-shadow:0 18px 45px rgba(8,47,73,.35) !important;
  border-radius:22px !important;
  padding:18px 20px !important;
}
#modalPlanilla .modal-header-pro h2{
  color:#f8fbff !important;
  letter-spacing:.02em !important;
}
#modalPlanilla .modal-etiqueta{
  color:#7dd3fc !important;
}
#modalPlanilla .nota{
  color:#b7d5ef !important;
}
#modalPlanilla .planilla-toolbar{
  flex:0 0 auto !important;
  display:grid !important;
  grid-template-columns:180px 220px 240px 1fr auto !important;
  gap:12px !important;
  margin:14px 0 !important;
  padding:14px !important;
  border:1px solid rgba(125,211,252,.22) !important;
  border-radius:20px !important;
  background:rgba(15,23,42,.72) !important;
}
#modalPlanilla .label-campo{
  color:#93c5fd !important;
}
#modalPlanilla .input-modal{
  background:#061525 !important;
  color:#e0f2fe !important;
  border:1px solid rgba(56,189,248,.35) !important;
}
#modalPlanilla .planilla-simbologia,
#modalPlanilla .planilla-meta-excel{
  flex:0 0 auto !important;
  border:1px solid rgba(56,189,248,.22) !important;
  background:rgba(8,20,38,.76) !important;
  color:#dff6ff !important;
}
#modalPlanilla .planilla-simbologia strong,
#modalPlanilla .planilla-meta-excel span{
  color:#e0f7ff !important;
}
#modalPlanilla #resumenPlanilla{
  flex:0 0 auto !important;
  margin:8px 0 !important;
}
#modalPlanilla .planilla-scroll{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:auto !important;
  border:1px solid rgba(56,189,248,.28) !important;
  border-radius:22px !important;
  background:rgba(2,6,23,.62) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 22px 50px rgba(0,0,0,.25) !important;
}
#modalPlanilla .planilla-excel-table{
  min-width:1580px !important;
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  background:transparent !important;
}
#modalPlanilla .planilla-excel-table th{
  position:sticky !important;
  top:0 !important;
  z-index:3 !important;
  background:linear-gradient(180deg,#0ea5e9,#0369a1) !important;
  color:#ffffff !important;
  border-color:rgba(255,255,255,.18) !important;
  text-transform:uppercase !important;
  font-size:11px !important;
  letter-spacing:.05em !important;
}
#modalPlanilla .planilla-excel-table td{
  background:rgba(15,23,42,.92) !important;
  color:#e5f3ff !important;
  border-color:rgba(125,211,252,.16) !important;
  font-size:12px !important;
  vertical-align:middle !important;
}
#modalPlanilla .planilla-proyecto-row td{
  position:sticky !important;
  top:0 !important;
  z-index:4 !important;
  background:linear-gradient(90deg,#082f49,#0f766e,#0369a1) !important;
  color:#ffffff !important;
  font-size:14px !important;
  letter-spacing:.08em !important;
  text-align:left !important;
  padding:12px 16px !important;
}
#modalPlanilla .planilla-data-row:hover td{
  background:rgba(14,165,233,.24) !important;
}
#modalPlanilla .planilla-editable{
  background:rgba(251,191,36,.16) !important;
  color:#fde68a !important;
}
#modalPlanilla .planilla-relevante{
  background:rgba(59,130,246,.14) !important;
}
#modalPlanilla .planilla-estatus{
  color:#bbf7d0 !important;
}
#modalPlanilla .planilla-nota-final{
  flex:0 0 auto !important;
  margin:10px 0 0 !important;
}
#modalPlanilla .btn-cerrar-pro,
#modalPlanilla .btn-recargar-perfil{
  border:1px solid rgba(125,211,252,.35) !important;
  box-shadow:0 0 22px rgba(14,165,233,.25) !important;
}
@media(max-width:900px){
  #modalPlanilla .modal-planilla-pc{padding:14px !important;}
  #modalPlanilla .planilla-toolbar{grid-template-columns:1fr !important;}
  #modalPlanilla .planilla-excel-table{min-width:1400px !important;}
}

/* ===== FIX FINAL PLANILLA: tabla grande + controles compactos ===== */
#modalPlanilla .modal-planilla-pc{
  padding:8px 10px !important;
  gap:6px !important;
  overflow:hidden !important;
}
#modalPlanilla .modal-header-pro{
  padding:8px 12px !important;
  border-radius:14px !important;
  min-height:0 !important;
}
#modalPlanilla .modal-header-pro h2{
  font-size:18px !important;
  line-height:1.1 !important;
  margin:0 !important;
}
#modalPlanilla .modal-etiqueta,
#modalPlanilla .modal-header-pro .nota{
  font-size:10px !important;
  line-height:1.15 !important;
  margin:2px 0 0 !important;
}
#modalPlanilla .btn-cerrar-pro{
  padding:7px 12px !important;
  font-size:11px !important;
  border-radius:12px !important;
}
#modalPlanilla .planilla-toolbar{
  grid-template-columns:130px 160px 170px 1fr 92px !important;
  gap:7px !important;
  margin:5px 0 !important;
  padding:7px 9px !important;
  border-radius:14px !important;
}
#modalPlanilla .label-campo{
  font-size:9px !important;
  margin-bottom:2px !important;
}
#modalPlanilla .input-modal{
  min-height:30px !important;
  height:30px !important;
  padding:5px 8px !important;
  font-size:11px !important;
  border-radius:9px !important;
}
#modalPlanilla .btn-recargar-perfil{
  height:30px !important;
  min-height:30px !important;
  padding:5px 8px !important;
  font-size:10px !important;
  border-radius:9px !important;
}
#modalPlanilla .planilla-simbologia{
  padding:4px 7px !important;
  margin:0 !important;
  border-radius:10px !important;
  gap:5px !important;
  font-size:9px !important;
}
#modalPlanilla .simbolo{
  padding:2px 6px !important;
  font-size:8px !important;
}
#modalPlanilla .planilla-meta-excel{
  border-radius:10px !important;
  min-height:0 !important;
}
#modalPlanilla .planilla-meta-excel span{
  padding:5px 8px !important;
  font-size:10px !important;
  line-height:1.1 !important;
}
#modalPlanilla #resumenPlanilla{
  font-size:10px !important;
  line-height:1.1 !important;
  margin:2px 0 !important;
}
#modalPlanilla .planilla-scroll{
  flex:1 1 100% !important;
  min-height:0 !important;
  height:auto !important;
  border-radius:12px !important;
  overflow:auto !important;
}
#modalPlanilla .planilla-excel-table{
  min-width:1220px !important;
  table-layout:fixed !important;
  font-size:10px !important;
}
#modalPlanilla .planilla-excel-table th,
#modalPlanilla .planilla-excel-table td{
  padding:5px 6px !important;
  font-size:10px !important;
  line-height:1.15 !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:anywhere !important;
}
#modalPlanilla .planilla-proyecto-row td{
  position:sticky !important;
  top:0 !important;
  z-index:5 !important;
  padding:7px 10px !important;
  font-size:12px !important;
  line-height:1.1 !important;
}
#modalPlanilla .planilla-header-row th{
  top:29px !important;
  font-size:9px !important;
  padding:6px 5px !important;
}
#modalPlanilla .planilla-data-row td:nth-child(1){width:42px !important;text-align:center !important;}
#modalPlanilla .planilla-data-row td:nth-child(2){width:82px !important;text-align:center !important;}
#modalPlanilla .planilla-data-row td:nth-child(3){width:210px !important;}
#modalPlanilla .planilla-data-row td:nth-child(4){width:150px !important;}
#modalPlanilla .planilla-data-row td:nth-child(5){width:120px !important;}
#modalPlanilla .planilla-data-row td:nth-child(6),
#modalPlanilla .planilla-data-row td:nth-child(7){width:70px !important;text-align:center !important;}
#modalPlanilla .planilla-data-row td:nth-child(8),
#modalPlanilla .planilla-data-row td:nth-child(9),
#modalPlanilla .planilla-data-row td:nth-child(10),
#modalPlanilla .planilla-data-row td:nth-child(11),
#modalPlanilla .planilla-data-row td:nth-child(12),
#modalPlanilla .planilla-data-row td:nth-child(13){width:78px !important;text-align:center !important;}
#modalPlanilla .planilla-nota-final{
  font-size:9px !important;
  line-height:1.15 !important;
  margin:3px 0 0 !important;
}
@media(max-width:900px){
  #modalPlanilla .modal-planilla-pc{padding:6px !important;}
  #modalPlanilla .planilla-toolbar{grid-template-columns:1fr 1fr !important;}
  #modalPlanilla .planilla-excel-table{min-width:1180px !important;}
}

/* ===== PLANILLA PC - FIX REAL COMPACTO FULLSCREEN 12-05 ===== */
#modalPlanilla.modal{
  padding:0 !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  overflow:hidden !important;
}
#modalPlanilla .modal-planilla-pc{
  width:100vw !important;
  max-width:100vw !important;
  height:100vh !important;
  max-height:100vh !important;
  margin:0 !important;
  border-radius:0 !important;
  padding:6px 10px 7px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
#modalPlanilla .modal-header-pro{
  min-height:0 !important;
  padding:6px 12px !important;
  border-radius:12px !important;
  flex:0 0 auto !important;
}
#modalPlanilla .modal-header-pro h2{
  font-size:14px !important;
  line-height:1.05 !important;
  margin:0 !important;
}
#modalPlanilla .modal-etiqueta{
  font-size:8px !important;
  line-height:1 !important;
  padding:2px 6px !important;
}
#modalPlanilla .modal-header-pro .nota{
  font-size:7.8px !important;
  line-height:1.05 !important;
  margin:1px 0 0 !important;
  max-width:calc(100vw - 160px) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#modalPlanilla .btn-cerrar-pro{
  padding:5px 10px !important;
  min-height:24px !important;
  height:24px !important;
  font-size:9px !important;
  border-radius:10px !important;
}
#modalPlanilla .planilla-toolbar{
  grid-template-columns:115px 145px 155px 1fr 78px !important;
  gap:5px !important;
  margin:2px 0 !important;
  padding:5px 7px !important;
  border-radius:10px !important;
  flex:0 0 auto !important;
}
#modalPlanilla .label-campo{
  font-size:7.5px !important;
  line-height:1 !important;
  margin:0 0 1px !important;
}
#modalPlanilla .input-modal{
  min-height:23px !important;
  height:23px !important;
  padding:3px 6px !important;
  font-size:9px !important;
  border-radius:7px !important;
}
#modalPlanilla .btn-recargar-perfil{
  height:23px !important;
  min-height:23px !important;
  padding:3px 6px !important;
  font-size:8.5px !important;
  border-radius:7px !important;
  align-self:end !important;
}
#modalPlanilla .planilla-simbologia{
  margin:1px 0 !important;
  padding:3px 6px !important;
  min-height:0 !important;
  border-radius:8px !important;
  gap:4px !important;
  font-size:7.5px !important;
  line-height:1 !important;
  flex:0 0 auto !important;
}
#modalPlanilla .planilla-simbologia strong{
  font-size:7.5px !important;
  margin-right:3px !important;
}
#modalPlanilla .simbolo{
  padding:1px 5px !important;
  font-size:7px !important;
  line-height:1.1 !important;
  border-radius:999px !important;
}
#modalPlanilla .planilla-meta-excel{
  display:grid !important;
  grid-template-columns:1fr 1fr 1fr !important;
  gap:0 !important;
  margin:1px 0 !important;
  border-radius:8px !important;
  min-height:0 !important;
  flex:0 0 auto !important;
}
#modalPlanilla .planilla-meta-excel span{
  padding:4px 7px !important;
  font-size:8.5px !important;
  line-height:1 !important;
  min-height:0 !important;
}
#modalPlanilla #resumenPlanilla{
  margin:0 !important;
  font-size:7.5px !important;
  line-height:1 !important;
  min-height:0 !important;
  flex:0 0 auto !important;
}
#modalPlanilla .planilla-scroll{
  flex:1 1 auto !important;
  min-height:260px !important;
  height:auto !important;
  max-height:none !important;
  border-radius:10px !important;
  overflow:auto !important;
}
#modalPlanilla .planilla-excel-table{
  width:100% !important;
  min-width:1320px !important;
  table-layout:fixed !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
}
#modalPlanilla .planilla-excel-table th,
#modalPlanilla .planilla-excel-table td{
  padding:4px 5px !important;
  font-size:8.5px !important;
  line-height:1.12 !important;
  height:24px !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  vertical-align:middle !important;
}
#modalPlanilla .planilla-proyecto-row td{
  padding:6px 9px !important;
  font-size:10px !important;
  line-height:1 !important;
  height:24px !important;
  position:sticky !important;
  top:0 !important;
  z-index:5 !important;
}
#modalPlanilla .planilla-header-row th{
  font-size:7.5px !important;
  line-height:1.05 !important;
  padding:5px 4px !important;
  height:26px !important;
  position:sticky !important;
  top:24px !important;
  z-index:4 !important;
}
#modalPlanilla .planilla-excel-table th:nth-child(1),
#modalPlanilla .planilla-excel-table td:nth-child(1){width:92px !important;}
#modalPlanilla .planilla-excel-table th:nth-child(2),
#modalPlanilla .planilla-excel-table td:nth-child(2){width:155px !important;}
#modalPlanilla .planilla-excel-table th:nth-child(3),
#modalPlanilla .planilla-excel-table td:nth-child(3){width:95px !important;}
#modalPlanilla .planilla-excel-table th:nth-child(4),
#modalPlanilla .planilla-excel-table td:nth-child(4){width:72px !important;text-align:center !important;}
#modalPlanilla .planilla-excel-table th:nth-child(5),
#modalPlanilla .planilla-excel-table td:nth-child(5){width:170px !important;}
#modalPlanilla .planilla-excel-table th:nth-child(6),
#modalPlanilla .planilla-excel-table td:nth-child(6),
#modalPlanilla .planilla-excel-table th:nth-child(7),
#modalPlanilla .planilla-excel-table td:nth-child(7){width:62px !important;text-align:center !important;}
#modalPlanilla .planilla-excel-table th:nth-child(8),
#modalPlanilla .planilla-excel-table td:nth-child(8){width:66px !important;text-align:center !important;}
#modalPlanilla .planilla-excel-table th:nth-child(9),
#modalPlanilla .planilla-excel-table td:nth-child(9){width:285px !important;min-width:285px !important;text-align:left !important;}
#modalPlanilla .planilla-excel-table th:nth-child(10),
#modalPlanilla .planilla-excel-table td:nth-child(10){width:86px !important;text-align:center !important;}
#modalPlanilla .planilla-excel-table th:nth-child(11),
#modalPlanilla .planilla-excel-table td:nth-child(11){width:72px !important;text-align:center !important;}
#modalPlanilla .planilla-excel-table th:nth-child(12),
#modalPlanilla .planilla-excel-table td:nth-child(12){width:72px !important;text-align:center !important;}
#modalPlanilla .planilla-excel-table th:nth-child(13),
#modalPlanilla .planilla-excel-table td:nth-child(13){width:96px !important;text-align:center !important;}
#modalPlanilla .planilla-nota-final{
  margin:2px 0 0 !important;
  font-size:7px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  flex:0 0 auto !important;
}
@media (max-height:720px){
  #modalPlanilla .modal-planilla-pc{padding:5px 8px !important;gap:2px !important;}
  #modalPlanilla .modal-header-pro{padding:5px 10px !important;}
  #modalPlanilla .modal-header-pro h2{font-size:13px !important;}
  #modalPlanilla .planilla-toolbar{padding:4px 6px !important;margin:1px 0 !important;}
  #modalPlanilla .planilla-simbologia{padding:2px 5px !important;}
  #modalPlanilla .planilla-meta-excel span{padding:3px 6px !important;}
  #modalPlanilla .planilla-scroll{min-height:300px !important;}
}


/* FIX REAL - Relevantes: morado + blanco; importante morado + amarillo */
#modalPlanilla .planilla-excel-table td.planilla-relevante{
  background:linear-gradient(135deg,#4c1d95,#6d28d9,#7c3aed) !important;
  color:#ffffff !important;
  font-weight:800 !important;
  text-align:left !important;
  box-shadow:inset 0 0 0 1px rgba(216,180,254,.45) !important;
}
#modalPlanilla .planilla-excel-table td.planilla-relevante.relevante-importante{
  background:linear-gradient(135deg,#4c1d95,#6d28d9,#7c3aed) !important;
  color:#fde047 !important;
  font-weight:950 !important;
  text-shadow:0 0 8px rgba(253,224,71,.35) !important;
}
#modalPlanilla .planilla-data-row:hover td.planilla-relevante{
  background:linear-gradient(135deg,#4c1d95,#6d28d9,#7c3aed) !important;
}
#modalPlanilla .planilla-data-row:hover td.planilla-relevante.relevante-importante{
  color:#fde047 !important;
}

/* ===== HORARIOS INTELIGENTES PC - FASE 1 SEGURA ===== */
.horario-inteligente-panel{
  margin:16px 0 18px;
  border:1px solid rgba(124,247,255,.18);
  background:linear-gradient(145deg,rgba(7,18,35,.94),rgba(30,9,58,.72));
  border-radius:22px;
  padding:16px;
  box-shadow:0 22px 55px rgba(0,0,0,.34), inset 0 0 26px rgba(124,247,255,.05);
}
.horario-inteligente-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  margin-bottom:14px;
}
.horario-inteligente-head strong{
  display:block;
  color:#f7ffff;
  font-size:1rem;
}
.horario-inteligente-head span,
.horario-inteligente-head small{
  color:rgba(230,247,255,.72);
  font-size:.82rem;
}
.horario-form-grid,
.horario-manual-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:10px;
  margin-top:10px;
}
.horario-manual-grid{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:12px;
}
.horario-manual-grid label{
  display:block;
  color:#7cf7ff;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:5px;
}
.horario-acciones-inteligentes{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.horario-preview-inteligente{
  margin-top:14px;
  border:1px dashed rgba(124,247,255,.22);
  background:rgba(0,0,0,.16);
  border-radius:16px;
  padding:12px;
  color:rgba(245,255,255,.82);
}
.horario-preview-titulo{
  color:#fff;
  font-weight:900;
  margin-bottom:10px;
}
.horario-preview-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px;
}
.horario-dia-preview{
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.055);
  border-radius:14px;
  padding:10px;
}
.horario-dia-preview b,
.horario-dia-preview em,
.horario-dia-preview small{
  display:block;
}
.horario-dia-preview b{color:#eaffff;font-size:.78rem;}
.horario-dia-preview em{color:#7cf7ff;font-style:normal;font-weight:900;margin:4px 0;}
.horario-dia-preview small{color:rgba(235,250,255,.72);font-size:.72rem;}
.horario-dia-preview.turno-libre,
.horario-dia-preview.turno-descanso{
background:rgba(255,213,74,.22);
border:1px solid rgba(255,213,74,.55);
box-shadow:0 0 12px rgba(255,213,74,.18);
}
.horario-dia-preview.turno-noche{background:rgba(110,74,255,.14);}
.horario-dia-preview.turno-administrativo{background:rgba(255,213,74,.11);}
.horario-configurado{
  border-color:rgba(167,255,223,.32);
}
.horario-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.horario-card-actions .btn-secundario{
  padding:8px 10px;
  font-size:.78rem;
}
@media(max-width:760px){
  .horario-inteligente-head{flex-direction:column;}
}


/* ===== HORARIOS FULLSCREEN PREMIUM ESTILO PLANILLA + BUSCADOR VIVO ===== */
#modalHorario{
  align-items:stretch !important;
  justify-content:stretch !important;
  padding:0 !important;
  background:radial-gradient(circle at top left,rgba(124,58,237,.22),transparent 34%),radial-gradient(circle at top right,rgba(0,229,255,.18),transparent 36%),rgba(1,6,18,.92) !important;
}
#modalHorario .modal-horario{
  width:100vw !important;
  max-width:none !important;
  height:100vh !important;
  max-height:none !important;
  margin:0 !important;
  border-radius:0 !important;
  overflow:auto !important;
  padding:22px !important;
  background:linear-gradient(135deg,rgba(5,12,32,.98),rgba(20,8,45,.96),rgba(3,20,36,.98)) !important;
}
#modalHorario .modal-header-pro{
  position:sticky;
  top:0;
  z-index:20;
  margin:-22px -22px 18px;
  padding:18px 22px;
  border-bottom:1px solid rgba(124,247,255,.18);
  background:linear-gradient(135deg,rgba(3,10,28,.96),rgba(34,12,68,.94));
  backdrop-filter:blur(18px);
}
#modalHorario .perfil-selector-grid{
  position:relative;
  display:grid !important;
  grid-template-columns:minmax(260px,1fr) auto !important;
  gap:12px !important;
  align-items:end !important;
  border:1px solid rgba(124,247,255,.16);
  background:rgba(255,255,255,.045);
  padding:14px;
  border-radius:20px;
  box-shadow:0 14px 45px rgba(0,0,0,.28);
}
.buscador-horario-premium{
  min-height:48px !important;
  font-size:1rem !important;
  border:1px solid rgba(124,247,255,.38) !important;
  background:linear-gradient(135deg,rgba(6,17,40,.96),rgba(15,31,68,.82)) !important;
  box-shadow:0 0 0 3px rgba(124,247,255,.06),0 16px 38px rgba(0,0,0,.25) !important;
}
.resultados-buscar-horario{
  position:absolute;
  left:14px;
  right:170px;
  top:calc(100% - 4px);
  z-index:50;
  display:grid;
  gap:8px;
  max-height:390px;
  overflow:auto;
  padding:10px;
  border:1px solid rgba(124,247,255,.25);
  background:linear-gradient(145deg,rgba(3,10,28,.98),rgba(27,10,58,.97));
  border-radius:18px;
  box-shadow:0 26px 80px rgba(0,0,0,.55),0 0 35px rgba(124,247,255,.12);
}
.resultado-horario-item{
  width:100%;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(124,247,255,.045));
  color:#f6ffff;
  border-radius:16px;
  padding:10px;
  display:grid;
  grid-template-columns:44px 1fr auto;
  gap:10px;
  align-items:center;
  text-align:left;
  cursor:pointer;
}
.resultado-horario-item:hover{
  border-color:rgba(124,247,255,.45);
  transform:translateY(-1px);
  background:linear-gradient(135deg,rgba(124,247,255,.14),rgba(167,139,250,.12));
}
.avatar-horario-mini{
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  color:#00111a;
  background:linear-gradient(135deg,#7cf7ff,#d8b4fe,#a7ffdf);
  box-shadow:0 0 18px rgba(124,247,255,.28);
}
.resultado-horario-info strong,
.resultado-horario-info small{display:block;}
.resultado-horario-info strong{font-size:.94rem;color:#fff;}
.resultado-horario-info small{font-size:.76rem;color:rgba(230,247,255,.72);margin-top:3px;}
.resultado-horario-item em{
  font-style:normal;
  font-size:.72rem;
  font-weight:900;
  color:#00111a;
  background:#7cf7ff;
  border-radius:999px;
  padding:6px 9px;
}
.resultado-horario-vacio{
  color:rgba(240,250,255,.78);
  padding:14px;
  text-align:center;
}
#modalHorario .tabla-horario-body{
  grid-template-columns:repeat(auto-fill,minmax(360px,1fr)) !important;
  gap:16px !important;
  padding-bottom:40px;
}
#modalHorario .horario-card-pro{
  border-radius:22px !important;
  background:linear-gradient(145deg,rgba(7,18,38,.96),rgba(34,13,70,.74),rgba(5,28,48,.9)) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.38),inset 0 0 28px rgba(124,247,255,.055) !important;
}
#modalHorario .horario-card-pro:hover{
  transform:translateY(-2px);
  border-color:rgba(124,247,255,.35);
}
#modalHorario .horario-inteligente-panel{
  border-radius:24px !important;
  margin-top:16px !important;
}
@media(max-width:760px){
  #modalHorario .modal-horario{padding:14px !important;}
  #modalHorario .modal-header-pro{margin:-14px -14px 14px;padding:14px;}
  #modalHorario .perfil-selector-grid{grid-template-columns:1fr !important;}
  .resultados-buscar-horario{left:10px;right:10px;}
  #modalHorario .tabla-horario-body{grid-template-columns:1fr !important;}
}

/* =========================================================
   HORARIOS OPERATIVOS PRO - estilo Planilla fullscreen
   Implementación visual solicitada: proyectos, bases, puestos,
   buscador vivo, tabla premium, preview y acciones rápidas.
   ========================================================= */
.modal-horario-operativo-pro{
  width:100vw!important; height:100vh!important; max-width:none!important; max-height:none!important;
  margin:0!important; border-radius:0!important; padding:0!important; display:grid!important;
  grid-template-columns:245px minmax(0,1fr); overflow:hidden!important;
  background:radial-gradient(circle at top left,rgba(0,153,255,.18),transparent 34%),linear-gradient(135deg,#071421,#071022 45%,#030713)!important;
  border:1px solid rgba(52,144,255,.32)!important; box-shadow:0 0 45px rgba(0,119,255,.28)!important;
  color:#eef7ff!important;
}
.horarios-sidebar-pro{background:linear-gradient(180deg,rgba(8,24,43,.96),rgba(4,12,24,.98));border-right:1px solid rgba(65,149,255,.22);padding:22px 16px;display:flex;flex-direction:column;gap:18px;min-height:0}
.horarios-brand-pro{display:flex;align-items:center;gap:12px}.horarios-logo-pro{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#0ea5ff,#1d4ed8);display:grid;place-items:center;font-size:25px;box-shadow:0 0 20px rgba(0,166,255,.38)}
.horarios-brand-pro strong{font-size:30px;color:#198bff;line-height:1}.horarios-brand-pro span,.horarios-user-pro span{display:block;color:#a9bed3;font-size:11px;text-transform:uppercase}.horarios-user-pro{display:flex;align-items:center;gap:10px;padding:14px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}
.horarios-nav-pro{display:flex;flex-direction:column;gap:7px;overflow:auto;padding-right:3px}.horarios-nav-pro span{padding:12px 13px;border-radius:11px;color:#c7d7e9;border:1px solid transparent;font-size:14px}.horarios-nav-pro span.activo{background:linear-gradient(135deg,#0b74ff,#1352d9);color:#fff;box-shadow:0 0 18px rgba(36,116,255,.35)}
.horarios-volver-pro{margin-top:auto;width:100%;background:rgba(239,68,68,.13)!important;border:1px solid rgba(248,113,113,.35)!important;color:#fecaca!important}
.horarios-main-pro{min-width:0;height:100vh;overflow:auto;padding:18px 20px 24px;display:flex;flex-direction:column;gap:14px}.horarios-top-pro{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:1px solid rgba(70,147,255,.16);padding-bottom:12px}.horarios-top-pro h2{margin:4px 0 2px;font-size:27px;letter-spacing:.5px;color:#fff}.horarios-reloj-pro{text-align:right;color:#bdd0e6}.horarios-reloj-pro strong{display:block;color:#1495ff;font-size:22px;margin-top:4px}
.horarios-filtros-pro{background:rgba(8,23,45,.78);border:1px solid rgba(69,145,255,.2);border-radius:13px;padding:15px;display:grid;grid-template-columns:repeat(5,minmax(120px,1fr)) auto;gap:12px;align-items:end;box-shadow:inset 0 0 18px rgba(0,118,255,.06)}.horarios-filtros-pro label{display:block;text-transform:uppercase;color:#a9c5e5;font-size:11px;margin-bottom:6px}.horario-buscador-wrap-pro{position:relative}.horarios-filtros-pro .btn-modal{height:42px;white-space:nowrap}
.horarios-quick-pro{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:rgba(8,23,45,.58);border:1px solid rgba(69,145,255,.16);border-radius:13px;padding:11px 15px}.chip-horario{border:1px solid rgba(118,164,222,.28);background:rgba(255,255,255,.035);color:#e8f2ff;border-radius:8px;padding:9px 15px;font-weight:700;cursor:pointer}.chip-horario.activo{background:#0b74ff;border-color:#49a4ff}.horarios-quick-actions{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}.horarios-quick-actions .btn-modal{background:linear-gradient(135deg,#16a34a,#059669)!important}.horarios-quick-actions .btn-secundario{background:linear-gradient(135deg,#7c3aed,#4f46e5)!important;color:#fff!important;border-color:rgba(167,139,250,.45)!important}
.horario-editor-pro{padding:14px!important;border-radius:13px!important;background:rgba(4,15,30,.72)!important;border:1px solid rgba(74,144,255,.18)!important}.horario-editor-pro .horario-form-grid{grid-template-columns:1.3fr repeat(5,1fr)!important}.horario-editor-pro .horario-manual-grid{grid-template-columns:repeat(7,1fr)!important;margin-top:10px!important}.horario-editor-pro .horario-acciones-inteligentes{justify-content:flex-end!important}
.horarios-table-panel-pro{background:rgba(7,20,39,.84);border:1px solid rgba(78,151,255,.2);border-radius:13px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.28)}.horarios-panel-title{display:flex;align-items:center;gap:12px;padding:13px 16px}.horarios-panel-title strong{color:#f8fbff}.horarios-panel-title .nota{background:rgba(20,132,255,.18);border:1px solid rgba(65,157,255,.3);border-radius:8px;padding:5px 10px;color:#6fc3ff!important;font-size:12px!important}
.tabla-horario-body{display:block!important;padding:0!important}.tabla-horario-scroll-pro{overflow:auto;max-height:44vh}.tabla-horario-operativa-pro{width:100%;border-collapse:separate;border-spacing:0;min-width:1180px}.tabla-horario-operativa-pro th{position:sticky;top:0;background:linear-gradient(180deg,#096ef0,#064eb7);color:white;text-transform:uppercase;font-size:12px;padding:13px 12px;z-index:1}.tabla-horario-operativa-pro td{border-bottom:1px solid rgba(90,145,205,.14);border-right:1px solid rgba(90,145,205,.09);padding:12px;color:#edf6ff;font-size:13px;vertical-align:middle}.tabla-horario-operativa-pro tr:hover td{background:rgba(59,130,246,.10)}.tabla-horario-operativa-pro small{display:block;color:#98b4d1;margin-top:3px}.oficial-cell-pro{display:flex;align-items:center;gap:10px;min-width:190px}.badge-turno-pro,.badge-estado-pro{display:inline-flex;min-width:86px;justify-content:center;align-items:center;border-radius:7px;padding:7px 10px;font-weight:900;font-size:12px;color:#fff}.badge-dia{background:linear-gradient(135deg,#0b74ff,#1255d9)}.badge-noche{background:linear-gradient(135deg,#7c3aed,#4c1d95)}.badge-admin{background:linear-gradient(135deg,#14b8a6,#0f766e)}.badge-libre{background:linear-gradient(135deg,#64748b,#334155)}.badge-vacaciones{background:linear-gradient(135deg,#ef4444,#991b1b)}.badge-incapacidad{background:linear-gradient(135deg,#a855f7,#6d28d9)}.badge-ausente{background:linear-gradient(135deg,#a3a3a3,#525252)}.badge-estado-pro.activo{background:#166534}.badge-estado-pro.pendiente{background:#92400e}.badge-estado-pro.vacaciones{background:#be123c}.acciones-horario-tabla-pro{display:flex;gap:7px}.acciones-horario-tabla-pro button{width:34px;height:31px;border-radius:7px;border:1px solid rgba(88,166,255,.35);background:#0b56cf;color:#fff;cursor:pointer;font-weight:900}.acciones-horario-tabla-pro button:nth-child(2){background:#6d28d9}.acciones-horario-tabla-pro button:nth-child(3){background:#854d0e}
.horarios-bottom-pro{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:16px}.horarios-bottom-pro .horario-preview-inteligente{min-height:180px!important;max-height:260px;overflow:auto;background:rgba(7,20,39,.84)!important;border:1px solid rgba(78,151,255,.2)!important;border-radius:13px!important}.horarios-acciones-lateral-pro{background:rgba(7,20,39,.88);border:1px solid rgba(78,151,255,.2);border-radius:13px;padding:14px;display:flex;flex-direction:column;gap:8px}.horarios-acciones-lateral-pro strong{margin-bottom:5px}.horarios-acciones-lateral-pro button{border:0;border-radius:8px;padding:11px 12px;color:white;font-weight:900;text-align:left;cursor:pointer}.accion-reubicar{background:#0b74ff}.accion-salida{background:#be123c}.accion-vacaciones{background:#d97706}.accion-cobertura{background:#0891b2}.accion-cadena{background:#7c3aed}.accion-historial{background:#475569}.resultados-buscar-horario{position:absolute!important;z-index:99;left:0;right:0;top:100%;margin-top:6px;max-height:330px;overflow:auto;background:#07192e!important;border:1px solid rgba(81,164,255,.42)!important;border-radius:12px!important;box-shadow:0 18px 36px rgba(0,0,0,.45)!important}.resultado-horario-item{width:100%;display:flex;align-items:center;gap:10px;padding:11px;border:0;border-bottom:1px solid rgba(255,255,255,.06);background:transparent;color:#fff;text-align:left;cursor:pointer}.resultado-horario-item:hover{background:rgba(30,120,255,.16)}.resultado-horario-info{flex:1}.resultado-horario-info small{display:block;color:#a8bfd9;margin-top:2px}.resultado-horario-item em{font-style:normal;color:#67e8f9;font-size:11px}.avatar-horario-mini{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#38bdf8,#1d4ed8);color:#fff;font-weight:900;border:2px solid rgba(255,255,255,.25)}
@media(max-width:1100px){.modal-horario-operativo-pro{grid-template-columns:1fr}.horarios-sidebar-pro{display:none}.horarios-filtros-pro{grid-template-columns:repeat(2,1fr)}.horario-editor-pro .horario-form-grid,.horario-editor-pro .horario-manual-grid{grid-template-columns:repeat(2,1fr)!important}.horarios-bottom-pro{grid-template-columns:1fr}}


/* === ESM HORARIOS SOLO PANEL CENTRAL (sin menú izquierdo ni acciones laterales) === */
#modalHorario .modal-horario-operativo-pro{
  width: min(98vw, 1820px) !important;
  height: 96vh !important;
  max-width: none !important;
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: radial-gradient(circle at top left, rgba(0,149,255,.14), transparent 36%), #06152b !important;
  border: 1px solid rgba(0, 183, 255, .32) !important;
  box-shadow: 0 0 50px rgba(0, 149, 255, .25), inset 0 0 34px rgba(0, 183, 255, .06) !important;
}
#modalHorario .horarios-main-solo-central{
  width: 100% !important;
  height: 100% !important;
  overflow: auto !important;
  padding: 18px 22px 22px !important;
  background: linear-gradient(180deg, #061a35 0%, #06152b 45%, #041025 100%) !important;
}
#modalHorario .horarios-top-pro{
  border-bottom: 1px solid rgba(0, 183, 255, .20) !important;
  padding-bottom: 14px !important;
  margin-bottom: 14px !important;
}
#modalHorario .horarios-top-pro h2{
  font-size: clamp(22px, 2vw, 34px) !important;
  letter-spacing: .5px !important;
  color: #f4fbff !important;
  text-shadow: 0 0 18px rgba(0, 149, 255, .45) !important;
}
#modalHorario .horarios-reloj-pro{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}
#modalHorario .horarios-volver-top-pro{
  position: static !important;
  width: auto !important;
  min-width: 92px !important;
  height: 38px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #0575ff, #00d4ff) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 10px 28px rgba(0,149,255,.35) !important;
}
#modalHorario .horarios-filtros-pro,
#modalHorario .horarios-quick-pro,
#modalHorario .horario-editor-pro,
#modalHorario .horarios-table-panel-pro,
#modalHorario .horarios-bottom-pro{
  border: 1px solid rgba(0, 183, 255, .20) !important;
  background: linear-gradient(180deg, rgba(5, 28, 58, .95), rgba(4, 18, 42, .96)) !important;
  box-shadow: inset 0 0 22px rgba(0, 183, 255, .04), 0 16px 34px rgba(0, 0, 0, .20) !important;
}
#modalHorario .horarios-bottom-pro{
  display: block !important;
}
#modalHorario .horario-preview-inteligente{
  width: 100% !important;
}
#modalHorario .tabla-horario-scroll-pro{
  max-height: 42vh !important;
}
#modalHorario .tabla-horario-operativa-pro th{
  background: linear-gradient(90deg, #046cff, #00bfff) !important;
  color: #fff !important;
}
#modalHorario .horario-preview-grid{
  grid-template-columns: repeat(14, minmax(92px, 1fr)) !important;
}
@media (max-width: 1100px){
  #modalHorario .horario-preview-grid{ grid-template-columns: repeat(7, minmax(92px, 1fr)) !important; }
  #modalHorario .horarios-filtros-pro{ grid-template-columns: repeat(2, 1fr) !important; }
}


/* === FIX REAL: quitar buscador duplicado arriba y corregir texto Administrativo === */
#modalHorario .horarios-filtros-pro{
  grid-template-columns: repeat(5, minmax(130px, 1fr)) auto !important;
}
#modalHorario .badge-admin{
  min-width: 110px !important;
  font-size: 11px !important;
  padding: 7px 8px !important;
  white-space: nowrap !important;
}
#modalHorario .horario-dia-preview em,
#modalHorario .horario-dia-preview small{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#modalHorario .turno-administrativo em{
  font-size: 11px !important;
}
@media (max-width: 1100px){
  #modalHorario .horarios-filtros-pro{ grid-template-columns: repeat(2, 1fr) !important; }
}

/* === HORARIOS LIMPIO: sin filtros superiores ni chips === */
#modalHorario .horarios-filtros-pro,
#modalHorario .horarios-quick-pro{
  display:none !important;
}
#modalHorario .horario-editor-pro{
  margin-top: 8px !important;
}
#modalHorario .horario-form-grid-limpio{
  grid-template-columns: 1.35fr 1.15fr .9fr .8fr .8fr 1fr !important;
}
#modalHorario .horario-vacaciones-box{
  margin-top: 12px !important;
  padding: 12px !important;
  border: 1px solid rgba(0,183,255,.18) !important;
  border-radius: 14px !important;
  background: rgba(4,18,42,.55) !important;
}
#modalHorario .vacaciones-check{
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
  color:#eefbff !important;
  font-weight:900 !important;
  cursor:pointer !important;
}
#modalHorario .vacaciones-check input{
  width:18px !important;
  height:18px !important;
  accent-color:#00d4ff !important;
}
#modalHorario .horario-vacaciones-campos{
  margin-top: 11px !important;
  display:grid !important;
  grid-template-columns: repeat(3, minmax(160px, 1fr)) !important;
  gap: 10px !important;
}
#modalHorario .horario-vacaciones-campos.oculto{
  display:none !important;
}
@media (max-width: 1100px){
  #modalHorario .horario-form-grid-limpio,
  #modalHorario .horario-vacaciones-campos{
    grid-template-columns: repeat(2, minmax(160px, 1fr)) !important;
  }
}
@media (max-width: 700px){
  #modalHorario .horario-form-grid-limpio,
  #modalHorario .horario-vacaciones-campos{
    grid-template-columns: 1fr !important;
  }
}

#modalHorario .vacaciones-libres-auto-box{grid-column:1/-1;}
#modalHorario .vacaciones-libres-auto{min-height:44px;border:1px solid rgba(250,204,21,.45);background:rgba(250,204,21,.10);border-radius:10px;padding:10px;display:flex;flex-wrap:wrap;gap:8px;color:#fde68a;font-weight:800;}
#modalHorario .vacacion-libre-chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;background:linear-gradient(135deg,#facc15,#ca8a04);color:#1f1600;padding:7px 10px;font-size:12px;font-weight:900;}

/* Cubre Libre fijo semanal - Software ESM */
.badge-cubre-libre{background:linear-gradient(135deg,#f59e0b,#b45309)}
.badge-estado-pro.cubre-libre{background:#b45309}
.cubre-libre-ayuda{grid-column:1/-1;padding:10px 12px;border-radius:12px;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.25);color:#fde68a;font-weight:700;font-size:13px}

/* Planilla conectada con Horarios + verificación QR Android */
.planilla-qr-ok{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
  background:rgba(16,185,129,.18);border:1px solid rgba(16,185,129,.55);color:#bbf7d0;font-weight:800;white-space:nowrap;
}
.planilla-qr-pendiente{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
  background:rgba(148,163,184,.12);border:1px solid rgba(148,163,184,.35);color:#cbd5e1;font-weight:700;white-space:nowrap;
}
.planilla-qr{ text-align:center; }


/* FIX Software ESM: reloj visible Costa Rica */
.esm-reloj-panel{
  min-width:142px;
  padding:8px 12px;
  border:1px solid rgba(20,149,255,.35);
  border-radius:16px;
  background:linear-gradient(135deg, rgba(7,18,36,.78), rgba(0,57,115,.34));
  box-shadow:0 0 18px rgba(20,149,255,.16), inset 0 0 14px rgba(255,255,255,.04);
  color:#e9f7ff;
  text-align:center;
  line-height:1.05;
}
.esm-reloj-panel small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#8fd0ff;font-weight:800;margin-bottom:3px;}
.esm-reloj-panel strong{display:block;font-size:18px;color:#38d5ff;font-weight:900;font-variant-numeric:tabular-nums;}
.esm-reloj-panel span{display:block;font-size:10px;color:#cfe8ff;margin-top:3px;white-space:nowrap;}
.horarios-reloj-pro strong{font-variant-numeric:tabular-nums;}
@media(max-width:900px){.esm-reloj-panel{min-width:118px;padding:7px 9px}.esm-reloj-panel span{display:none}.esm-reloj-panel strong{font-size:16px}}


/* FIX Software ESM: reloj global visible en panel y todos los módulos */
.esm-reloj-global-fijo{
  position:fixed; top:14px; right:18px; z-index:99999;
  min-width:150px; padding:9px 12px; border-radius:16px;
  background:linear-gradient(135deg,rgba(5,12,28,.92),rgba(7,35,66,.88));
  border:1px solid rgba(56,213,255,.35); box-shadow:0 12px 32px rgba(0,0,0,.35),0 0 18px rgba(20,149,255,.16);
  color:#eaf8ff; text-align:center; backdrop-filter:blur(10px); pointer-events:none;
}
.esm-reloj-global-fijo small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#8fd0ff;font-weight:800;margin-bottom:2px;}
.esm-reloj-global-fijo strong{display:block;font-size:18px;color:#38d5ff;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.1;}
.esm-reloj-global-fijo span{display:block;font-size:10px;color:#cfe8ff;margin-top:3px;white-space:nowrap;}
@media(max-width:900px){.esm-reloj-global-fijo{right:10px;top:10px;min-width:118px;padding:7px 9px}.esm-reloj-global-fijo span{display:none}.esm-reloj-global-fijo strong{font-size:16px}}

/* ===== RELOJ SOFTWARE ESM PRO - UBICACIÓN LIMPIA SIN TAPAR NOTIFICACIONES ===== */
.topbar-right{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}
.esm-reloj-panel{
  order:20;
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
  min-width:auto !important;
  max-width:210px !important;
  padding:7px 10px !important;
  border-radius:999px !important;
  border:1px solid rgba(56,213,255,.30) !important;
  background:linear-gradient(135deg, rgba(5,15,34,.78), rgba(11,45,76,.58)) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.24), inset 0 0 14px rgba(56,213,255,.06) !important;
  color:#e9f7ff !important;
  text-align:left !important;
  line-height:1.05 !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
  position:relative !important;
  z-index:3 !important;
}
.esm-reloj-panel::before{
  content:"⏱";
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(56,213,255,.12);
  border:1px solid rgba(56,213,255,.26);
  box-shadow:0 0 14px rgba(56,213,255,.12);
  flex:0 0 30px;
}
.esm-reloj-panel small{display:block !important;font-size:9px !important;text-transform:uppercase !important;letter-spacing:.10em !important;color:#9adfff !important;font-weight:900 !important;margin:0 0 2px 0 !important;}
.esm-reloj-panel strong{display:block !important;font-size:15px !important;color:#5ee7ff !important;font-weight:950 !important;font-variant-numeric:tabular-nums !important;line-height:1 !important;}
.esm-reloj-panel span{display:block !important;font-size:9px !important;color:#cfe8ff !important;margin-top:2px !important;white-space:nowrap !important;max-width:135px !important;overflow:hidden !important;text-overflow:ellipsis !important;}
.notificaciones-wrapper-esm{position:relative !important; z-index:12 !important; order:10 !important; flex:0 0 auto !important;}
.btn-sonido{order:30 !important;}
.user-info-pro{order:40 !important;}

.esm-reloj-dashboard-card{
  position:absolute;
  top:18px;
  right:18px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 15px;
  border-radius:20px;
  border:1px solid rgba(56,213,255,.32);
  background:linear-gradient(145deg, rgba(4,16,35,.82), rgba(8,43,75,.55));
  box-shadow:0 18px 36px rgba(0,0,0,.25), 0 0 22px rgba(56,213,255,.12), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:#eaf8ff;
  z-index:5;
  pointer-events:none;
}
.esm-reloj-dashboard-card .esm-reloj-icono{
  width:38px;height:38px;border-radius:15px;
  display:grid;place-items:center;
  background:rgba(56,213,255,.13);
  border:1px solid rgba(56,213,255,.30);
  box-shadow:0 0 18px rgba(56,213,255,.14);
}
.esm-reloj-dashboard-card small,.esm-reloj-modulo-card small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#93dcff;font-weight:900;margin-bottom:3px;}
.esm-reloj-dashboard-card strong,.esm-reloj-modulo-card strong{display:block;font-size:20px;color:#5ee7ff;font-weight:950;font-variant-numeric:tabular-nums;line-height:1.05;}
.esm-reloj-dashboard-card span,.esm-reloj-modulo-card span{display:block;font-size:11px;color:#d6ecff;margin-top:3px;white-space:nowrap;}

.esm-reloj-modulo-card{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:18px;
  border:1px solid rgba(56,213,255,.28);
  background:linear-gradient(135deg, rgba(5,15,34,.72), rgba(10,42,72,.48));
  box-shadow:0 10px 24px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.10);
  color:#eaf8ff;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  text-align:left;
}
.esm-reloj-modulo-card::before{
  content:"⏱";
  width:32px;height:32px;border-radius:13px;
  display:grid;place-items:center;
  background:rgba(56,213,255,.12);
  border:1px solid rgba(56,213,255,.25);
}
.modal-header-pro{gap:14px !important;}
.modal-header-pro .esm-reloj-modulo-card{flex:0 0 auto;}
.horarios-reloj-pro{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:9px 12px !important;
  border-radius:18px !important;
  border:1px solid rgba(56,213,255,.26) !important;
  background:linear-gradient(135deg, rgba(5,15,34,.72), rgba(10,42,72,.48)) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.horarios-reloj-pro::before{content:"⏱";width:32px;height:32px;border-radius:13px;display:grid;place-items:center;background:rgba(56,213,255,.12);border:1px solid rgba(56,213,255,.25);}
.horarios-reloj-pro span{font-size:11px !important;color:#d6ecff !important;white-space:nowrap !important;}
.horarios-reloj-pro strong{font-size:20px !important;color:#5ee7ff !important;font-weight:950 !important;font-variant-numeric:tabular-nums !important;}
.horarios-reloj-pro .btn-cerrar-pro{margin-left:8px !important;}
.esm-reloj-global-fijo{display:none !important;}

@media(max-width:1100px){
  .esm-reloj-dashboard-card{position:relative;top:auto;right:auto;margin:0 0 16px auto;width:max-content;max-width:100%;}
  .welcome-pro{padding-top:22px !important;}
  .esm-reloj-panel span{display:none !important;}
}
@media(max-width:760px){
  .topbar-right{justify-content:flex-start !important;}
  .esm-reloj-panel{order:5;width:100%;max-width:none;justify-content:flex-start;}
  .notificaciones-wrapper-esm{order:10;}
  .esm-reloj-dashboard-card{width:100%;justify-content:flex-start;}
  .modal-header-pro .esm-reloj-modulo-card{width:100%;margin-left:0;}
  .horarios-reloj-pro{width:100%;flex-wrap:wrap;}
}


/* Modo DEMO profesional */
.esm-demo-panel{
  display:flex;align-items:center;justify-content:space-between;gap:18px;margin:18px 0 22px;padding:18px 20px;border:1px solid rgba(55,224,255,.32);border-radius:24px;background:linear-gradient(135deg,rgba(10,18,38,.92),rgba(11,43,73,.82));box-shadow:0 18px 45px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.05);color:#eaf9ff;position:relative;overflow:hidden
}
.esm-demo-panel:before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 20% 30%,rgba(0,255,255,.16),transparent 32%),radial-gradient(circle at 82% 45%,rgba(95,96,255,.14),transparent 30%);pointer-events:none}
.esm-demo-info,.esm-demo-actions,.esm-demo-panel small{position:relative;z-index:1}.esm-demo-info h2{margin:.2rem 0 .35rem;font-size:1.35rem}.esm-demo-info p{margin:0;color:rgba(234,249,255,.78);max-width:760px}.esm-demo-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.esm-demo-actions button{border:0;border-radius:16px;padding:11px 14px;background:rgba(0,225,255,.16);color:#f4fdff;font-weight:800;box-shadow:inset 0 0 0 1px rgba(95,231,255,.25);cursor:pointer}.esm-demo-actions button:hover{transform:translateY(-1px);background:rgba(0,225,255,.24)}.esm-demo-actions .btn-demo-danger{background:rgba(255,77,109,.16);box-shadow:inset 0 0 0 1px rgba(255,121,146,.25)}.esm-demo-panel small{display:block;color:#aeefff;font-weight:700}.esm-demo-panel.demo-activo{border-color:rgba(39,255,168,.48);box-shadow:0 18px 50px rgba(0,0,0,.32),0 0 32px rgba(39,255,168,.12)}
@media(max-width:980px){.esm-demo-panel{align-items:flex-start;flex-direction:column}.esm-demo-actions{justify-content:flex-start}}


/* VIDEO CENTRAL DEL PANEL PRINCIPAL - entre identidad y reloj */
.welcome-pro{
  min-height: 245px;
  padding-right: 245px;
}
.welcome-pro .welcome-identidad{
  position: relative;
  z-index: 4;
  max-width: 360px;
}
.esm-banner-video-panel{
  position:absolute;
  top:24px;
  left: clamp(300px, 34vw, 430px);
  right: 245px;
  height: 138px;
  border-radius: 26px;
  overflow:hidden;
  border:1px solid rgba(94,231,255,.28);
  background:linear-gradient(135deg, rgba(2,10,24,.78), rgba(10,42,72,.45));
  box-shadow:0 14px 28px rgba(0,0,0,.24), 0 0 18px rgba(94,231,255,.10), inset 0 1px 0 rgba(255,255,255,.10);
  z-index:2;
}
.esm-banner-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
  pointer-events:none;
}
.esm-banner-video-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(2,8,18,.40), rgba(2,8,18,.08), rgba(2,8,18,.48)),
    radial-gradient(circle at 50% 50%, rgba(94,231,255,.06), transparent 55%);
  pointer-events:none;
}
@media (max-width: 1100px){
  .welcome-pro{padding-right: 0; padding-top: 150px;}
  .esm-reloj-dashboard-card{top:18px; right:18px;}
  .esm-banner-video-panel{left:18px; right:245px; top:18px; height:112px;}
}
@media (max-width: 760px){
  .welcome-pro{padding-top: 0;}
  .esm-banner-video-panel{position:relative; left:auto; right:auto; top:auto; height:120px; margin:16px 0; width:100%;}
  .esm-reloj-dashboard-card{position:relative; top:auto; right:auto; margin:0 0 14px auto; width:max-content;}
}

/* Software ESM - Banner central premium liviano sin MP4 */
.esm-banner-animado-pro{
  isolation:isolate;
  background:
    radial-gradient(circle at 22% 30%, rgba(34,211,238,.22), transparent 30%),
    radial-gradient(circle at 78% 55%, rgba(37,99,235,.24), transparent 34%),
    linear-gradient(135deg, rgba(2,9,25,.94), rgba(5,24,48,.82) 48%, rgba(1,7,18,.94));
}
.esm-banner-animado-pro::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:conic-gradient(from 180deg, transparent, rgba(56,189,248,.20), transparent, rgba(59,130,246,.17), transparent);
  animation:esmBannerSpin 16s linear infinite;
  opacity:.9;
  filter:blur(1px);
  z-index:0;
}
.esm-banner-animado-pro::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 0 35%, rgba(125,249,255,.22) 46%, transparent 58% 100%);
  transform:translateX(-120%);
  animation:esmBannerSweep 4.8s ease-in-out infinite;
  z-index:2;
  pointer-events:none;
}
.esm-tech-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(94,231,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,231,255,.09) 1px, transparent 1px);
  background-size:34px 34px;
  transform:perspective(420px) rotateX(58deg) translateY(18px) scale(1.25);
  transform-origin:center bottom;
  animation:esmGridMove 7s linear infinite;
  opacity:.55;
  z-index:1;
}
.esm-tech-radar{
  position:absolute;
  width:138px;
  height:138px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(103,232,249,.34);
  box-shadow:0 0 24px rgba(56,189,248,.24), inset 0 0 22px rgba(56,189,248,.14);
  z-index:2;
}
.esm-tech-radar::before{
  content:"";
  position:absolute;
  inset:50% 50% 0 50%;
  height:1px;
  width:68px;
  background:linear-gradient(90deg, rgba(103,232,249,.95), transparent);
  transform-origin:left center;
  animation:esmRadarSweep 3.2s linear infinite;
}
.esm-tech-radar span{
  position:absolute;
  inset:18px;
  border:1px solid rgba(103,232,249,.18);
  border-radius:50%;
}
.esm-tech-radar span:nth-child(2){inset:38px;opacity:.8}
.esm-tech-radar span:nth-child(3){inset:58px;opacity:.7;background:rgba(94,231,255,.34);box-shadow:0 0 18px rgba(94,231,255,.9)}
.esm-tech-lines{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:3;
}
.esm-tech-lines i{
  position:absolute;
  height:2px;
  width:34%;
  left:-40%;
  background:linear-gradient(90deg, transparent, rgba(125,249,255,.88), transparent);
  box-shadow:0 0 12px rgba(56,189,248,.75);
  animation:esmLineFly 3.8s linear infinite;
}
.esm-tech-lines i:nth-child(1){top:22%;animation-delay:0s}
.esm-tech-lines i:nth-child(2){top:42%;animation-delay:.8s;width:26%}
.esm-tech-lines i:nth-child(3){top:62%;animation-delay:1.6s;width:38%}
.esm-tech-lines i:nth-child(4){top:78%;animation-delay:2.4s;width:22%}
.esm-tech-lines i:nth-child(5){top:32%;animation-delay:3.1s;width:30%}
.esm-tech-particles b{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(125,249,255,.95);
  box-shadow:0 0 12px rgba(125,249,255,.9);
  animation:esmParticleFloat 5.5s ease-in-out infinite;
  z-index:4;
}
.esm-tech-particles b:nth-child(1){left:12%;top:68%;animation-delay:0s}
.esm-tech-particles b:nth-child(2){left:25%;top:28%;animation-delay:.7s}
.esm-tech-particles b:nth-child(3){left:48%;top:76%;animation-delay:1.2s}
.esm-tech-particles b:nth-child(4){left:67%;top:24%;animation-delay:1.9s}
.esm-tech-particles b:nth-child(5){left:82%;top:62%;animation-delay:2.6s}
.esm-tech-particles b:nth-child(6){left:36%;top:50%;animation-delay:3.2s}
.esm-banner-tech-text{
  position:absolute;
  left:22px;
  bottom:18px;
  z-index:6;
  display:flex;
  flex-direction:column;
  gap:3px;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.esm-banner-tech-text strong{
  color:#eaffff;
  font-size:1.05rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.esm-banner-tech-text small{
  color:#8eeeff;
  font-weight:800;
  font-size:.78rem;
}
.esm-banner-animado-pro .esm-banner-video-overlay{
  z-index:5;
  background:
    linear-gradient(90deg, rgba(2,8,18,.72), rgba(2,8,18,.15), rgba(2,8,18,.55)),
    radial-gradient(circle at 50% 50%, rgba(94,231,255,.08), transparent 58%);
}
@keyframes esmBannerSpin{to{transform:rotate(360deg)}}
@keyframes esmBannerSweep{0%,18%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
@keyframes esmGridMove{from{background-position:0 0,0 0}to{background-position:0 34px,34px 0}}
@keyframes esmRadarSweep{to{transform:rotate(360deg)}}
@keyframes esmLineFly{0%{transform:translateX(0) skewX(-20deg);opacity:0}12%{opacity:1}100%{transform:translateX(420%) skewX(-20deg);opacity:0}}
@keyframes esmParticleFloat{0%,100%{transform:translateY(0) scale(.8);opacity:.45}50%{transform:translateY(-16px) scale(1.15);opacity:1}}
@media (prefers-reduced-motion: reduce){
  .esm-banner-animado-pro::before,.esm-banner-animado-pro::after,.esm-tech-grid,.esm-tech-radar::before,.esm-tech-lines i,.esm-tech-particles b{animation:none!important;}
}

/* FLUJO INICIAL CORREGIDO: video intro desde assets/intro-esm.mp4 primero */
#intro.esm-intro-activa{display:flex!important;position:fixed!important;inset:0!important;z-index:999999!important;background:#000!important;}
#intro.esm-intro-activa #videoIntro{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;}
#intro:not(.esm-intro-activa){display:none!important;}
#esmBootPremium.oculto{display:none!important;}
#esmBootPremium.esm-boot-activo{display:grid!important;}



/* INTRO INICIAL REAL - Software ESM
   Usa únicamente assets/intro-esm.mp4 y no muestra botón Saltar intro. */
body.esm-intro-pendiente{overflow:hidden!important;}
body.esm-intro-pendiente #loginBox,
body.esm-intro-pendiente #appPanel,
body.esm-intro-pendiente #esmBootPremium{display:none!important;}
body.esm-intro-pendiente #intro.esm-intro-activa{
  display:flex!important;
  visibility:visible!important;
  pointer-events:auto!important;
  position:fixed!important;
  inset:0!important;
  z-index:2147483647!important;
  background:#000!important;
  align-items:center!important;
  justify-content:center!important;
}
body.esm-intro-pendiente #videoIntro{
  display:block!important;
  visibility:visible!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  background:#000!important;
}
body.esm-intro-finalizada #intro,
body.esm-intro-finalizada #videoIntro{display:none!important;visibility:hidden!important;pointer-events:none!important;}
#btnSaltarIntro{display:none!important;}


/* INTRO ESM LIMPIA - 2026-05-16
   Solo usa ./assets/intro-esm.mp4 antes del login. */
body.esm-intro-pendiente{overflow:hidden!important;}
body.esm-intro-pendiente #loginBox,
body.esm-intro-pendiente #appPanel,
body.esm-intro-pendiente #esmBootPremium{display:none!important;visibility:hidden!important;}
#intro.esm-intro-activa{
  display:flex!important;
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  z-index:2147483647!important;
  background:#000!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
#intro.esm-intro-activa #videoIntro{
  display:block!important;
  width:100vw!important;
  height:100vh!important;
  object-fit:cover!important;
  background:#000!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
}
body.esm-intro-finalizada #intro,
body.esm-intro-finalizada #videoIntro,
#intro.oculto{display:none!important;visibility:hidden!important;pointer-events:none!important;}
#btnSaltarIntro{display:none!important;}

/* FIX INTRO ESM: video fluido sin estirar ni perder calidad */
#intro.esm-intro-activa{
  background:#000 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
#videoIntro{
  width:100vw !important;
  height:100vh !important;
  object-fit:contain !important;
  background:#000 !important;
  transform:translateZ(0);
  will-change:transform;
}


/* VIDEO DE ACCESO AL PANEL */
#panelIntro.esm-panel-intro {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
}
#panelIntro.oculto { display: none !important; }
#videoPanelIntro {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}


/* Limpieza final: intros de video eliminadas */
#intro,#videoIntro,#panelIntro,#videoPanelIntro{display:none!important;visibility:hidden!important;pointer-events:none!important;}
body.esm-intro-pendiente{overflow:auto!important;}

/* INTRO PREMIUM CON IMAGEN FIJA - 15 SEGUNDOS
   Solo agrega la pantalla inicial antes del login. No toca módulos ni lógica del sistema. */
body.esm-splash-activo{overflow:hidden!important;}
body.esm-splash-activo #loginBox{visibility:hidden!important;pointer-events:none!important;}
#esmSplashIntro.esm-splash-intro{
  position:fixed!important;inset:0!important;z-index:9999999!important;
  display:flex!important;align-items:flex-end!important;justify-content:center!important;
  background:#020814 url('./assets/intro-bg.png') center center / cover no-repeat!important;
  overflow:hidden!important;
}
#esmSplashIntro .esm-splash-overlay{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,rgba(0,174,255,.08),transparent 42%),
             linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.22) 58%,rgba(0,0,0,.58));
}
#esmSplashIntro .esm-splash-loader{
  position:relative;z-index:2;width:min(760px,72vw);margin-bottom:42px;text-align:center;
  filter:drop-shadow(0 0 18px rgba(0,183,255,.35));
}
#esmSplashIntro .esm-splash-title{
  color:#eaf8ff;font-weight:900;letter-spacing:.48em;font-size:15px;margin-bottom:14px;
  text-shadow:0 0 18px rgba(0,183,255,.55),0 2px 12px rgba(0,0,0,.75);
}
#esmSplashIntro .esm-splash-bar{
  height:13px;border-radius:999px;padding:2px;overflow:hidden;
  background:rgba(2,10,26,.72);border:1px solid rgba(155,220,255,.58);
  box-shadow:0 0 22px rgba(0,170,255,.42),inset 0 0 14px rgba(0,0,0,.85);
}
#esmSplashBarFill{
  height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,#0b62ff,#00d8ff,#8ef7ff,#00a8ff);
  box-shadow:0 0 18px rgba(0,216,255,.85),0 0 34px rgba(0,136,255,.42);
  transition:width .18s linear;
}
#esmSplashIntro .esm-splash-pct{
  color:#31dfff;font-size:24px;font-weight:900;margin-top:12px;
  text-shadow:0 0 18px rgba(0,216,255,.7),0 2px 12px rgba(0,0,0,.7);
}
#esmSplashIntro.esm-splash-salida{opacity:0;transition:opacity .7s ease;pointer-events:none!important;}
@media (max-width:800px){#esmSplashIntro .esm-splash-loader{width:82vw;margin-bottom:34px}.esm-splash-title{letter-spacing:.28em!important;font-size:12px!important}}

/* AGENDA EMPRESARIAL PREMIUM - enlazada a Perfil del Personal */
.agenda-premium-esm {
  background:
    radial-gradient(circle at top left, rgba(87,232,255,0.16), transparent 34%),
    radial-gradient(circle at bottom right, rgba(0,102,255,0.14), transparent 40%),
    linear-gradient(145deg, rgba(6,14,31,0.98), rgba(9,20,44,0.96));
}

.agenda-header-premium {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(87,232,255,0.22);
}

.agenda-toolbar-premium {
  grid-template-columns: minmax(240px, 1fr) auto;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(87,232,255,0.18);
  background: rgba(255,255,255,0.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 16px 36px rgba(0,0,0,0.18);
}

.agenda-resumen-premium {
  margin: 14px 0 18px;
}

.agenda-resumen-card {
  border-color: rgba(87,232,255,0.20);
  background: linear-gradient(145deg, rgba(87,232,255,0.11), rgba(255,255,255,0.035));
}

.agenda-lista-premium {
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}

.agenda-card-premium {
  grid-template-columns: 74px 1fr;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.025)),
    radial-gradient(circle at top right, rgba(87,232,255,0.13), transparent 42%);
}

.agenda-foto-wrap {
  position: relative;
  width: 66px;
  height: 66px;
  z-index: 2;
}

.agenda-card-premium .agenda-foto {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid rgba(87,232,255,0.42);
  box-shadow: 0 0 0 5px rgba(87,232,255,0.07), 0 0 24px rgba(87,232,255,0.18);
}

.agenda-online-dot {
  position: absolute;
  right: 4px;
  bottom: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #41ffb0;
  border: 2px solid rgba(6,14,31,0.98);
  box-shadow: 0 0 12px rgba(65,255,176,0.85);
}

.agenda-topline {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 8px;
}

.agenda-card-premium .agenda-info h3 {
  margin: 0 0 4px;
  font-size: 19px;
  letter-spacing: .2px;
}

.agenda-empresa {
  margin: 0 0 10px !important;
  color: rgba(226,241,255,0.72) !important;
}

.agenda-telefonos-box {
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
}

.agenda-telefonos-box div {
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}

.agenda-telefonos-box small {
  display: block;
  color: rgba(226,241,255,0.60);
  font-size: 11px;
  margin-bottom: 3px;
}

.agenda-telefonos-box strong {
  display: block;
  color: var(--text);
  word-break: break-word;
}

.agenda-botones-llamada {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.agenda-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  color: #06101f !important;
  background: linear-gradient(135deg, #57e8ff, #8affd2);
  box-shadow: 0 10px 22px rgba(87,232,255,0.18);
}

.agenda-emergency-btn {
  color: white !important;
  background: linear-gradient(135deg, #ff4d6d, #ff9f1c);
  box-shadow: 0 10px 22px rgba(255,77,109,0.18);
}

.agenda-call-disabled {
  opacity: .58;
  background: rgba(255,255,255,0.10);
  color: rgba(226,241,255,0.75) !important;
  box-shadow: none;
}

@media (max-width: 760px) {
  .agenda-toolbar-premium,
  .agenda-lista-premium,
  .agenda-botones-llamada {
    grid-template-columns: 1fr;
  }
}

/* AGENDA FULL SCREEN COMPACTA - ajuste solicitado: tarjetas pequeñas y solo contactos/teléfonos */
#modalAgenda.modal {
  padding: 0 !important;
  align-items: stretch !important;
  background: rgba(1,7,18,0.96) !important;
}

#modalAgenda .modal-contenido.modal-agenda.agenda-premium-esm {
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  padding: 22px clamp(18px, 4vw, 58px) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

#modalAgenda .agenda-header-premium {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  padding-bottom: 12px !important;
  margin-bottom: 14px !important;
}

#modalAgenda .agenda-header-premium .modal-etiqueta {
  display: none !important;
}

#modalAgenda .agenda-header-premium h2 {
  margin: 0 !important;
  font-size: clamp(22px, 2.5vw, 34px) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

#modalAgenda .agenda-header-premium .nota {
  display: none !important;
}

#modalAgenda .btn-cerrar-pro {
  padding: 10px 18px !important;
  min-width: auto !important;
}

#modalAgenda .agenda-toolbar-premium {
  max-width: 100% !important;
  grid-template-columns: 1fr auto !important;
  margin: 12px 0 16px !important;
  padding: 10px !important;
  border-radius: 18px !important;
}

#modalAgenda .agenda-toolbar-premium .input-modal {
  min-height: 46px !important;
  font-size: 15px !important;
}

#modalAgenda .agenda-toolbar-premium .btn-modal {
  width: auto !important;
  min-height: 46px !important;
  padding: 10px 18px !important;
  margin: 0 !important;
}

#modalAgenda .agenda-resumen-premium {
  display: none !important;
}

#modalAgenda .agenda-lista-premium {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  padding: 0 0 20px !important;
}

#modalAgenda .agenda-card-premium {
  display: grid !important;
  grid-template-columns: 88px minmax(220px, 1.4fr) minmax(190px, .8fr) minmax(210px, .9fr) !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 96px !important;
  padding: 14px 22px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(8,24,50,.88), rgba(5,14,32,.94)),
    radial-gradient(circle at right, rgba(0,190,255,.10), transparent 45%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.22) !important;
}

#modalAgenda .agenda-foto-wrap {
  width: 74px !important;
  height: 74px !important;
}

#modalAgenda .agenda-card-premium .agenda-foto {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

#modalAgenda .agenda-online-dot {
  right: 2px !important;
  bottom: 6px !important;
}

#modalAgenda .agenda-info {
  display: contents !important;
}

#modalAgenda .agenda-topline {
  display: none !important;
}

#modalAgenda .agenda-identidad-compacta h3 {
  margin: 0 0 4px !important;
  font-size: 22px !important;
  line-height: 1.05 !important;
}

#modalAgenda .agenda-cargo-compacto {
  margin: 0 0 5px !important;
  color: #23c7ff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

#modalAgenda .agenda-empresa {
  margin: 0 !important;
  font-size: 14px !important;
  color: rgba(226,241,255,.72) !important;
}

#modalAgenda .agenda-telefonos-box {
  display: contents !important;
}

#modalAgenda .agenda-phone-line {
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 18px !important;
  border-left: 1px solid rgba(87,232,255,.13) !important;
  background: transparent !important;
  border-radius: 0 !important;
}

#modalAgenda .agenda-phone-icon {
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  font-size: 20px !important;
  background: rgba(0,150,255,.13) !important;
  border: 1px solid rgba(39,199,255,.28) !important;
  color: #23c7ff !important;
}

#modalAgenda .agenda-phone-icon.emergency {
  background: rgba(255,70,70,.12) !important;
  border-color: rgba(255,92,92,.34) !important;
  color: #ff685f !important;
}

#modalAgenda .agenda-phone-line small {
  display: block !important;
  margin: 0 0 3px !important;
  font-size: 13px !important;
  color: rgba(226,241,255,.70) !important;
}

#modalAgenda .agenda-phone-line strong {
  display: block !important;
  font-size: 19px !important;
  color: #eef8ff !important;
  letter-spacing: .03em !important;
}

#modalAgenda .agenda-botones-llamada {
  display: none !important;
}

@media (max-width: 860px) {
  #modalAgenda .agenda-card-premium {
    grid-template-columns: 68px 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  #modalAgenda .agenda-foto-wrap,
  #modalAgenda .agenda-card-premium .agenda-foto {
    width: 62px !important;
    height: 62px !important;
  }
  #modalAgenda .agenda-info {
    display: block !important;
  }
  #modalAgenda .agenda-telefonos-box {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }
  #modalAgenda .agenda-phone-line {
    padding: 8px 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(87,232,255,.12) !important;
  }
  #modalAgenda .agenda-identidad-compacta h3 { font-size: 18px !important; }
}


/* CREAR CORREOS ESM - FULLSCREEN PREMIUM */
.correo-fullscreen-esm{
  width:min(1500px,96vw)!important;
  height:92vh!important;
  max-height:92vh!important;
  padding:22px!important;
  overflow:hidden!important;
  background:linear-gradient(135deg,rgba(3,10,24,.98),rgba(5,24,48,.96))!important;
  border:1px solid rgba(56,189,248,.28)!important;
  box-shadow:0 0 45px rgba(14,165,233,.22)!important;
}
.correo-header-esm{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.correo-header-esm h2{margin:4px 0;font-size:30px;color:#e0f2fe}.correo-header-actions-esm{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.correo-grid-esm{display:grid;grid-template-columns:42% 58%;gap:16px;height:calc(100% - 110px)}
.correo-panel-esm{background:rgba(15,23,42,.72);border:1px solid rgba(125,211,252,.18);border-radius:22px;padding:16px;overflow:auto}
.correo-panel-esm h3{margin:0 0 12px;color:#bfdbfe}.correo-filtros-esm{display:grid;grid-template-columns:1fr 1fr;gap:10px}.correo-filtros-esm input{grid-column:1/-1}
.correo-acciones-rapidas-esm{display:flex;gap:10px;margin:12px 0}.lista-destinatarios-correo-esm{display:grid;gap:8px;max-height:calc(100vh - 330px);overflow:auto;padding-right:4px}
.destinatario-correo-card-esm{display:grid;grid-template-columns:24px 44px 1fr;gap:10px;align-items:center;padding:9px 10px;border-radius:16px;background:rgba(2,6,23,.72);border:1px solid rgba(56,189,248,.14);cursor:pointer}
.destinatario-correo-card-esm:hover{border-color:rgba(56,189,248,.45);transform:translateY(-1px)}
.destinatario-avatar-esm{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#0ea5e9,#1e3a8a);color:white;font-weight:900}.destinatario-avatar-esm img{width:100%;height:100%;object-fit:cover}
.destinatario-info-esm{display:flex;flex-direction:column;gap:2px}.destinatario-info-esm strong{color:#f8fafc;font-size:14px}.destinatario-info-esm small{color:#94a3b8;font-size:11px}
.correo-panel-redactar-esm{display:flex;flex-direction:column;gap:10px}.correo-panel-redactar-esm label{color:#bae6fd;font-weight:700;font-size:13px}.correo-panel-redactar-esm small{color:#93c5fd}
.correo-textarea-esm{min-height:220px!important;resize:vertical}.correo-adjuntos-vista-esm,.correo-resumen-envio-esm,.estado-correo-esm{padding:10px;border-radius:14px;background:rgba(2,6,23,.7);border:1px solid rgba(59,130,246,.2);color:#dbeafe}
.btn-enviar-correo-esm{border:0;border-radius:18px;padding:15px 18px;background:linear-gradient(135deg,#0284c7,#2563eb);color:white;font-weight:900;letter-spacing:.3px;cursor:pointer;box-shadow:0 14px 28px rgba(37,99,235,.28)}
.btn-enviar-correo-esm:disabled{opacity:.55;cursor:not-allowed}.correo-ventana-secundaria-esm{overflow:auto!important}.correo-lista-historial-esm{display:grid;gap:12px;max-height:calc(92vh - 130px);overflow:auto;padding-right:6px}
.correo-historial-card-esm{padding:14px;border-radius:18px;background:rgba(2,6,23,.72);border:1px solid rgba(56,189,248,.16);color:#e5f3ff}.correo-historial-card-esm div:first-child{display:flex;justify-content:space-between;gap:12px}.correo-historial-card-esm p{color:#cbd5e1}.correo-historial-card-esm small{display:block;color:#93c5fd;margin-top:4px}
.correo-no-leido-esm{border-color:rgba(34,211,238,.65);box-shadow:0 0 25px rgba(34,211,238,.16)}.correo-estado-ok-esm{display:inline-block;margin-top:8px;padding:5px 10px;border-radius:999px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:#bbf7d0}.correo-adjuntos-mini-esm{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}.correo-adjuntos-mini-esm a{color:#7dd3fc;text-decoration:none;padding:5px 8px;border-radius:999px;background:rgba(14,165,233,.12)}
@media(max-width:900px){.correo-grid-esm{grid-template-columns:1fr;height:auto}.correo-fullscreen-esm{overflow:auto!important}.correo-header-esm{flex-direction:column}.correo-header-actions-esm{justify-content:flex-start}.lista-destinatarios-correo-esm{max-height:360px}}


/* AJUSTE PREMIUM: ACCESOS E ICONOS CREAR CORREOS / NOTIFICACIONES */
.modulo-card[data-modulo="crear_correos"]{
  cursor:pointer!important;
  border-color:rgba(56,189,248,.42)!important;
  background:linear-gradient(145deg,rgba(5,19,45,.96),rgba(8,33,67,.90))!important;
}
.modulo-card[data-modulo="crear_correos"] .icono-glass{
  background:
    radial-gradient(circle at 32% 25%,rgba(255,255,255,.34),transparent 18%),
    linear-gradient(135deg,rgba(14,165,233,.42),rgba(37,99,235,.42),rgba(168,85,247,.32))!important;
  border-color:rgba(125,211,252,.46)!important;
  box-shadow:0 0 30px rgba(56,189,248,.34), inset 0 0 18px rgba(255,255,255,.10)!important;
}
.modulo-card[data-modulo="crear_correos"] .icono-glass:before{
  content:'✉'!important;
  font-size:30px!important;
  color:#e0faff!important;
  filter:drop-shadow(0 0 12px rgba(34,211,238,.95))!important;
}
.modulo-card[data-modulo="crear_correos"] .icono-glass:after{
  content:'+'!important;
  position:absolute!important;
  right:7px!important;
  bottom:5px!important;
  width:17px!important;
  height:17px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  font-size:13px!important;
  font-weight:1000!important;
  color:#03101f!important;
  background:#67e8f9!important;
  box-shadow:0 0 12px rgba(103,232,249,.75)!important;
}
.modulo-card[data-modulo="agenda"] .icono-glass:before{content:'☎'!important;}
.notificaciones-wrapper-esm #btnNotificacionesEsm,
#btnNotificacionesEsm{
  border-radius:16px!important;
  background:linear-gradient(135deg,rgba(14,165,233,.30),rgba(168,85,247,.32))!important;
  border:1px solid rgba(125,211,252,.38)!important;
  box-shadow:0 0 22px rgba(56,189,248,.22)!important;
}
.correo-header-actions-esm .btn-modal,
#btnAbrirRecibidosCorreo,
#btnAbrirHistorialCorreo{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  border-radius:16px!important;
  padding:11px 14px!important;
  background:linear-gradient(135deg,rgba(14,165,233,.22),rgba(37,99,235,.24))!important;
  border:1px solid rgba(125,211,252,.28)!important;
  box-shadow:0 0 18px rgba(56,189,248,.13)!important;
}
#btnAbrirRecibidosCorreo::before{content:'📬';font-size:18px;}
#btnAbrirHistorialCorreo::before{content:'🗂️';font-size:18px;}
#btnAbrirRecibidosCorreo,#btnAbrirHistorialCorreo{font-size:0!important;}
#btnAbrirRecibidosCorreo::after{content:'Correos recibidos';font-size:13px!important;font-weight:900!important;}
#btnAbrirHistorialCorreo::after{content:'Historial de envíos';font-size:13px!important;font-weight:900!important;}
.btn-enviar-correo-esm{
  background:linear-gradient(135deg,#06b6d4,#2563eb,#7c3aed)!important;
  box-shadow:0 16px 34px rgba(37,99,235,.32),0 0 26px rgba(34,211,238,.18)!important;
}
.correo-fullscreen-esm{
  width:98vw!important;
  height:94vh!important;
  max-height:94vh!important;
}

/* FIX FINAL: campanita de notificaciones visible sin tocar módulos estables */
.notificaciones-wrapper-esm.esm-notif-dashboard,
body > .notificaciones-wrapper-esm.esm-notif-dashboard{
  position:fixed!important;
  top:22px!important;
  right:24px!important;
  z-index:2147483640!important;
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
.notificaciones-wrapper-esm.esm-notif-dashboard #btnNotificacionesEsm{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  align-items:center!important;
  justify-content:center!important;
}
.notificaciones-wrapper-esm.esm-notif-dashboard .panel-notificaciones-esm{
  position:fixed!important;
  top:82px!important;
  right:24px!important;
  z-index:2147483641!important;
}


/* FIX QUIRURGICO ESM NOTIFICACIONES RELOJ 20260520 */
body.esm-panel-liberado .welcome-pro,
body.esm-panel-liberado .welcome,
body.esm-panel-liberado .dashboard{overflow:visible!important;}
body.esm-panel-liberado .welcome-pro{z-index:80!important;}
body.esm-panel-liberado .welcome-identidad{overflow:visible!important;z-index:90!important;}
body.esm-panel-liberado .welcome-identidad .panel-notificaciones-esm{z-index:2147483647!important;max-height:min(460px,68vh)!important;overflow:auto!important;}
.esm-reloj-dashboard-card{isolation:isolate!important;overflow:hidden!important;background:#041326!important;background-image:linear-gradient(145deg,#041326,#082044)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
.esm-reloj-dashboard-card::before,.esm-reloj-dashboard-card::after,.esm-reloj-dashboard-card *::before,.esm-reloj-dashboard-card *::after{content:none!important;display:none!important;background:none!important;animation:none!important;}
.esm-reloj-dashboard-card > *{position:relative!important;z-index:2!important;}

/* FIX ESM: ocultar texto Panel Pro detrás del reloj y asegurar ojito password */
.welcome-pro:before, body.pro-layout-final .welcome-pro:before, body.esm-panel-liberado .welcome-pro:before{content:none!important;display:none!important;opacity:0!important;visibility:hidden!important;}
#esmIntroOnlyFX,#esmCenterMonitor,#esmCenterLogs,#esmGpsScreen{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;animation:none!important;}
#togglePassword.login-eye{display:inline-flex!important;align-items:center!important;justify-content:center!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;}

/* Vehículos de Empresa - módulo separado de GPS */
#modalTraslados:not(.oculto){
  position:fixed !important; inset:0 !important; z-index:999999 !important; display:flex !important;
  align-items:center !important; justify-content:center !important; background:rgba(2,6,23,.88) !important;
  backdrop-filter: blur(12px) !important; overflow:auto !important; padding:18px !important;
}
#modalTraslados:not(.oculto) > .modal-contenido.modal-vehiculos-empresa-pro{
  width:min(1240px,96vw) !important; max-height:92vh !important; overflow:auto !important;
  border-radius:28px !important; border:1px solid rgba(125,211,252,.22) !important;
  background:linear-gradient(135deg,rgba(4,13,27,.98),rgba(8,25,47,.96)) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.55) !important; padding:22px !important; position:relative !important;
}
.vehiculos-empresa-header{margin-bottom:16px !important;}
.vehiculos-selector-assets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:10px 0 18px;}
.vehiculo-tipo-card{cursor:pointer;border:1px solid rgba(125,211,252,.2);background:rgba(15,23,42,.74);border-radius:22px;padding:14px;color:#e5f7ff;display:flex;flex-direction:column;gap:8px;align-items:center;transition:.2s ease;box-shadow:0 16px 38px rgba(0,0,0,.28)}
.vehiculo-tipo-card:hover,.vehiculo-tipo-card.activo{transform:translateY(-2px);border-color:rgba(56,189,248,.75);box-shadow:0 0 0 1px rgba(56,189,248,.25),0 18px 48px rgba(14,165,233,.22)}
.vehiculo-tipo-card img{width:100%;height:145px;object-fit:contain;border-radius:18px;background:rgba(2,6,23,.45)}
.vehiculo-tipo-card strong{font-size:1.1rem}.vehiculo-tipo-card span{font-size:.82rem;color:#93c5fd}
.vehiculos-toolbar-pro{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:16px}.resumen-vehiculos-empresa{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.resumen-card{background:rgba(15,23,42,.72);border:1px solid rgba(148,163,184,.16);border-radius:16px;padding:12px}.resumen-card strong{display:block;color:#e0f2fe}.resumen-card span{color:#93c5fd;font-size:.85rem}
.vehiculos-historial-shell{border:1px solid rgba(125,211,252,.16);border-radius:22px;background:rgba(2,6,23,.38);padding:16px}.vehiculos-historial-shell h3{margin:0 0 12px;color:#e0f2fe}.lista-vehiculos-empresa{display:grid;gap:14px}.vehiculo-grupo-panel{border:1px solid rgba(148,163,184,.14);border-radius:18px;padding:12px;background:rgba(15,23,42,.4)}.vehiculo-grupo-head-img{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.vehiculo-historial-titulo{display:flex;align-items:center;gap:12px}.vehiculo-historial-titulo img{width:86px;height:54px;object-fit:contain;border-radius:10px;background:rgba(2,6,23,.48)}.vehiculo-grupo-lista{display:grid;gap:10px}.vehiculo-registrado-card{background:rgba(2,6,23,.56)!important;border:1px solid rgba(125,211,252,.13)!important;border-radius:16px!important;padding:13px!important}.traslado-datos-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.vehiculo-check-resumen{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.vehiculo-check-resumen span{font-size:.8rem;background:rgba(15,23,42,.7);border:1px solid rgba(148,163,184,.14);border-radius:999px;padding:5px 8px}
.modal-registro-vehiculo{width:min(840px,94vw)!important}.vehiculo-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.vehiculo-checklist-pc{margin:14px 0;padding:12px;border-radius:16px;background:rgba(15,23,42,.55);border:1px solid rgba(148,163,184,.16)}.vehiculo-check-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;color:#e2e8f0}
@media (max-width:800px){.vehiculos-selector-assets{grid-template-columns:1fr}.resumen-vehiculos-empresa{grid-template-columns:1fr 1fr}.vehiculo-form-grid,.traslado-datos-grid{grid-template-columns:1fr}}


/* VEHÍCULOS DE EMPRESA - FULL PANTALLA REAL */
#modalTraslados:not(.oculto){display:flex!important;align-items:stretch!important;justify-content:stretch!important;padding:0!important;background:rgba(2,6,23,.96)!important;}
#modalTraslados:not(.oculto)>.modal-contenido.modal-vehiculos-empresa-pro.vehiculos-empresa-fullscreen{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;margin:0!important;border-radius:0!important;overflow:hidden!important;background:radial-gradient(circle at top left,rgba(37,99,235,.20),rgba(2,6,23,.98) 38%,#020617 100%)!important;border:0!important;padding:18px 20px!important;box-sizing:border-box!important;}
.vehiculos-empresa-header{height:72px!important;margin:0 0 12px!important;padding-bottom:12px!important;border-bottom:1px solid rgba(148,163,184,.16)!important;}
.vehiculos-empresa-header h2{font-size:2rem!important;margin:0!important;color:#f8fafc!important}.vehiculos-empresa-header .nota{margin-top:3px!important;color:#cbd5e1!important}
.vehiculos-empresa-layout-full{height:calc(100vh - 104px)!important;display:grid!important;grid-template-columns:minmax(0,1.45fr) minmax(360px,.75fr)!important;gap:18px!important;overflow:hidden!important;}
.vehiculos-empresa-main,.vehiculos-historial-full{min-height:0!important;overflow:auto!important;}
.vehiculos-empresa-main{display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;gap:14px!important;}
.vehiculos-selector-full{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;margin:0!important;}
.vehiculos-selector-full .vehiculo-tipo-card{height:190px!important;padding:12px!important;border-radius:16px!important;background:linear-gradient(145deg,rgba(15,23,42,.92),rgba(8,47,73,.45))!important;border:1px solid rgba(148,163,184,.22)!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;}
.vehiculos-selector-full .vehiculo-tipo-card.activo{border-color:#0ea5e9!important;box-shadow:0 0 0 1px rgba(14,165,233,.5),0 0 28px rgba(14,165,233,.22)!important;}
.vehiculos-selector-full .vehiculo-tipo-card img{width:100%!important;height:132px!important;object-fit:contain!important;background:transparent!important;border-radius:12px!important;filter:drop-shadow(0 16px 20px rgba(0,0,0,.55))!important;}
.vehiculos-selector-full .vehiculo-tipo-card strong{font-size:1rem!important;color:#f8fafc!important;text-transform:uppercase!important;letter-spacing:.04em!important}.vehiculos-selector-full .vehiculo-tipo-card span{display:none!important;}
.vehiculo-formulario-inline{display:block!important;margin:0!important;padding:14px!important;border-radius:18px!important;border:1px solid rgba(148,163,184,.18)!important;background:rgba(15,23,42,.62)!important;overflow:auto!important;}
.vehiculo-form-title-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin-bottom:12px!important}.vehiculo-form-title-row h3{margin:3px 0 0!important;color:#e0f2fe!important}.vehiculo-tipo-select-mini{max-width:170px!important;}
.vehiculo-form-grid-full{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;margin-bottom:12px!important;}
.vehiculo-checklist-inline{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin:8px 0 12px!important;}
.vehiculo-checklist-inline h3{display:none!important}.vehiculo-check-row{min-height:42px!important;margin:0!important;border-radius:12px!important;background:rgba(2,6,23,.48)!important;border:1px solid rgba(148,163,184,.16)!important;padding:8px 10px!important;}
.vehiculo-textareas-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important}.vehiculo-textareas-grid textarea{min-height:90px!important;}
.vehiculo-actions-row{display:grid!important;grid-template-columns:1fr 1.3fr!important;gap:12px!important;margin-top:12px!important}.vehiculo-actions-row .btn-modal{min-height:48px!important;border-radius:12px!important}.btn-secundario{background:rgba(15,23,42,.95)!important;border:1px solid rgba(148,163,184,.22)!important;color:#e2e8f0!important;}
.vehiculos-historial-full{padding:14px!important;border-radius:18px!important;background:rgba(15,23,42,.58)!important;border:1px solid rgba(148,163,184,.18)!important;}
.vehiculos-historial-header{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:10px!important;margin-bottom:10px!important}.vehiculos-historial-header h3{margin:3px 0 0!important;color:#e0f2fe!important}.vehiculos-historial-full #buscarTraslado{margin-bottom:10px!important}.resumen-vehiculos-empresa{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin:0 0 10px!important}.resumen-vehiculos-empresa .resumen-card{padding:9px 10px!important;border-radius:12px!important;background:rgba(2,6,23,.45)!important;border:1px solid rgba(148,163,184,.14)!important}.resumen-vehiculos-empresa .resumen-card strong{font-size:.78rem!important}.resumen-vehiculos-empresa .resumen-card span{font-size:.78rem!important;color:#bfdbfe!important}.lista-vehiculos-full{display:grid!important;gap:10px!important;}
.vehiculo-historial-card-pro{display:grid!important;grid-template-columns:118px minmax(0,1fr)!important;gap:12px!important;align-items:center!important;padding:12px!important;border-radius:16px!important;background:linear-gradient(145deg,rgba(15,23,42,.86),rgba(15,23,42,.56))!important;border:1px solid rgba(148,163,184,.15)!important;box-shadow:0 12px 28px rgba(0,0,0,.18)!important;}
.vehiculo-historial-card-pro img{width:118px!important;height:76px!important;object-fit:contain!important;border-radius:12px!important;background:rgba(2,6,23,.35)!important;}.vehiculo-historial-info p{margin:3px 0!important;color:#cbd5e1!important;font-size:.83rem!important}.vehiculo-historial-info small{display:block!important;color:#94a3b8!important;font-size:.75rem!important;margin-top:3px!important}.vehiculo-historial-top{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}.vehiculo-historial-top strong{font-size:1.05rem!important;color:#fff!important}.vehiculo-historial-top span{font-size:.72rem!important;font-weight:900!important;text-transform:uppercase!important;background:#1d4ed8!important;color:white!important;border-radius:999px!important;padding:4px 8px!important;}
@media(max-width:1100px){.vehiculos-empresa-layout-full{grid-template-columns:1fr!important;overflow:auto!important}.vehiculos-empresa-main,.vehiculos-historial-full{overflow:visible!important}.vehiculos-selector-full{grid-template-columns:1fr!important}.vehiculo-form-grid-full,.vehiculo-checklist-inline,.vehiculo-textareas-grid{grid-template-columns:1fr!important}}

/* FIX AISLADO FULLSCREEN VEHICULOS GPS TRASLADOS */

<!-- FIX AISLADO: fullscreen real Vehículos de Empresa y GPS Traslados + sin alerta falsa login -->

  body.esm-window-open{ overflow:hidden !important; }

  #modalVehiculosEmpresa:not(.oculto),
  #modalTraslados:not(.oculto){
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
    min-width:100vw !important;
    min-height:100vh !important;
    max-width:100vw !important;
    max-height:100vh !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    overflow:hidden !important;
    background:#030712 !important;
    z-index:999999 !important;
  }

  #modalVehiculosEmpresa:not(.oculto) > .modal-contenido,
  #modalTraslados:not(.oculto) > .modal-contenido{
    position:relative !important;
    inset:auto !important;
    width:100vw !important;
    height:100vh !important;
    min-width:100vw !important;
    min-height:100vh !important;
    max-width:100vw !important;
    max-height:100vh !important;
    margin:0 !important;
    padding:16px !important;
    border-radius:0 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  #modalVehiculosEmpresa:not(.oculto) .vehiculos-empresa-layout-full{
    height:calc(100vh - 118px) !important;
    display:grid !important;
    grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr) !important;
    gap:16px !important;
    overflow:hidden !important;
  }
  #modalVehiculosEmpresa:not(.oculto) .vehiculos-empresa-main,
  #modalVehiculosEmpresa:not(.oculto) .vehiculos-historial-shell{
    min-height:0 !important;
    max-height:100% !important;
    overflow:auto !important;
  }
  #modalVehiculosEmpresa:not(.oculto) .vehiculos-selector-assets{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(140px,1fr)) !important;
    gap:12px !important;
  }
  #modalVehiculosEmpresa:not(.oculto) .vehiculo-tipo-card img{
    width:100% !important;
    height:110px !important;
    object-fit:contain !important;
  }

  #modalTraslados:not(.oculto) .gps-live-layout{
    height:calc(100vh - 104px) !important;
    display:grid !important;
    grid-template-columns:260px minmax(0,1fr) 300px !important;
    gap:12px !important;
    overflow:hidden !important;
  }
  #modalTraslados:not(.oculto) .gps-live-map-shell,
  #modalTraslados:not(.oculto) #gpsLeafletMap{
    min-height:0 !important;
    height:100% !important;
    width:100% !important;
  }
  #modalTraslados:not(.oculto) .gps-live-detail-card,
  #modalTraslados:not(.oculto) .gps-live-list-card{
    max-height:100% !important;
    overflow:auto !important;
  }

  @media (max-width: 980px){
    #modalVehiculosEmpresa:not(.oculto) > .modal-contenido,
    #modalTraslados:not(.oculto) > .modal-contenido{
      padding:10px !important;
    }
    #modalVehiculosEmpresa:not(.oculto) .vehiculos-empresa-layout-full,
    #modalTraslados:not(.oculto) .gps-live-layout{
      grid-template-columns:1fr !important;
      height:calc(100vh - 104px) !important;
      overflow:auto !important;
    }
    #modalVehiculosEmpresa:not(.oculto) .vehiculos-selector-assets{
      grid-template-columns:1fr !important;
    }
  }

/* FIN FIX AISLADO FULLSCREEN VEHICULOS GPS TRASLADOS */


/* AJUSTE SEGURO VER USUARIOS - nombre visible y empresa compacta */
#modalVerUsuarios .usuarios-toolbar{
  display:flex;
  gap:12px;
  align-items:center;
}
#modalVerUsuarios #buscarUsuario{
  flex:1 1 auto;
  min-width:320px;
}
#modalVerUsuarios .usuario-card-top{
  align-items:flex-start;
}
#modalVerUsuarios .usuario-card-nombre h3{
  font-size:1.22rem;
  line-height:1.15;
  max-width:100%;
}
#modalVerUsuarios .usuario-card-nombre p{
  font-size:.82rem;
  max-width:100%;
}
#modalVerUsuarios .usuario-empresa-chip{
  display:inline-block;
  max-width:180px;
  margin-top:7px;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(87,232,255,.10);
  color:#d9f8ff;
  font-size:.70rem;
  font-weight:800;
  letter-spacing:.03em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:middle;
}
#modalVerUsuarios .usuario-card-info{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
#modalVerUsuarios .usuario-card-info span{
  min-width:0;
}
@media (max-width:900px){
  #modalVerUsuarios #buscarUsuario{min-width:0;}
  #modalVerUsuarios .usuario-card-info{grid-template-columns:1fr;}
  #modalVerUsuarios .usuario-empresa-chip{max-width:100%;}
}


/* FIX REAL VER USUARIOS: empresa compacta y nombre del personal visible */
#modalVerUsuarios .usuarios-toolbar{display:flex!important;gap:10px!important;align-items:center!important;flex-wrap:nowrap!important;}
#modalVerUsuarios #buscarUsuario{flex:1 1 auto!important;min-width:360px!important;font-size:1rem!important;}
#modalVerUsuarios #filtroEmpresaVerUsuarios{flex:0 0 220px!important;max-width:220px!important;font-size:.78rem!important;padding:9px 10px!important;}
#modalVerUsuarios .usuario-card-top{display:grid!important;grid-template-columns:64px minmax(0,1fr) auto!important;align-items:start!important;}
#modalVerUsuarios .usuario-card-nombre{min-width:0!important;max-width:100%!important;}
#modalVerUsuarios .usuario-card-nombre h3{font-size:1.28rem!important;line-height:1.12!important;font-weight:900!important;margin-bottom:4px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
#modalVerUsuarios .usuario-card-nombre p{font-size:.82rem!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
#modalVerUsuarios .usuario-empresa-chip{display:inline-block!important;width:auto!important;max-width:150px!important;margin-top:6px!important;padding:3px 8px!important;border-radius:999px!important;font-size:.66rem!important;line-height:1.1!important;font-weight:800!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;vertical-align:middle!important;}
#modalVerUsuarios .badge-estado{flex:0 0 auto!important;font-size:.68rem!important;padding:5px 8px!important;}
@media (max-width:900px){#modalVerUsuarios .usuarios-toolbar{flex-wrap:wrap!important;}#modalVerUsuarios #buscarUsuario{min-width:0!important;}#modalVerUsuarios #filtroEmpresaVerUsuarios{flex:1 1 100%!important;max-width:100%!important;}#modalVerUsuarios .usuario-card-top{grid-template-columns:56px minmax(0,1fr)!important;}#modalVerUsuarios .badge-estado{grid-column:2!important;justify-self:start!important;margin-top:4px!important;}}

/* Ver Usuarios: carpetas Administrativo / Por Proyectos */
#modalVerUsuarios .usuarios-vistas-tabs{
  display:flex!important;
  gap:10px!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  margin:12px 0 10px!important;
}
#modalVerUsuarios .usuarios-tab{
  border:1px solid rgba(255,255,255,.18)!important;
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
  border-radius:16px!important;
  padding:10px 16px!important;
  font-weight:900!important;
  letter-spacing:.2px!important;
  cursor:pointer!important;
  box-shadow:0 10px 25px rgba(0,0,0,.18)!important;
}
#modalVerUsuarios .usuarios-tab.activo{
  background:linear-gradient(135deg, rgba(0,255,195,.24), rgba(0,145,255,.18))!important;
  border-color:rgba(0,255,220,.55)!important;
  box-shadow:0 0 18px rgba(0,255,220,.20)!important;
}
#modalVerUsuarios #filtroProyectoVerUsuarios{
  flex:0 0 230px!important;
  max-width:230px!important;
  font-size:.84rem!important;
  padding:9px 10px!important;
}
#modalVerUsuarios .resumen-card.resumen-activo{
  border-color:rgba(0,255,220,.45)!important;
  box-shadow:0 0 18px rgba(0,255,220,.14)!important;
}
#modalVerUsuarios .resumen-card small{
  display:block!important;
  margin-top:5px!important;
  color:rgba(255,255,255,.65)!important;
  font-size:.72rem!important;
}
#modalVerUsuarios .chip-proyecto-click{
  cursor:pointer!important;
  border:1px solid rgba(255,255,255,.16)!important;
}
#modalVerUsuarios .chip-proyecto-click:hover{
  border-color:rgba(0,255,220,.45)!important;
  transform:translateY(-1px)!important;
}
@media (max-width:900px){
  #modalVerUsuarios #filtroProyectoVerUsuarios{flex:1 1 100%!important;max-width:100%!important;}
}

/* Ver Usuarios - vista tipo carpetas y ventanas internas */
#modalVerUsuarios .usuarios-carpetas-vista{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(260px,1fr))!important;
  gap:18px!important;
  margin-top:18px!important;
}
#modalVerUsuarios .usuarios-carpeta-card{
  min-height:210px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:linear-gradient(145deg,rgba(12,30,60,.88),rgba(6,12,30,.92))!important;
  color:#fff!important;
  border-radius:24px!important;
  padding:24px!important;
  text-align:left!important;
  cursor:pointer!important;
  box-shadow:0 18px 45px rgba(0,0,0,.28), inset 0 0 30px rgba(255,255,255,.04)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:10px!important;
}
#modalVerUsuarios .usuarios-carpeta-card:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(0,255,220,.55)!important;
  box-shadow:0 0 28px rgba(0,255,220,.18),0 20px 50px rgba(0,0,0,.34)!important;
}
#modalVerUsuarios .usuarios-carpeta-icono{font-size:3rem!important;line-height:1!important;}
#modalVerUsuarios .usuarios-carpeta-card strong{font-size:1.55rem!important;font-weight:900!important;}
#modalVerUsuarios .usuarios-carpeta-card small{font-size:.92rem!important;color:rgba(255,255,255,.74)!important;line-height:1.35!important;max-width:560px!important;}
#modalVerUsuarios .usuarios-detalle-vista{
  display:flex!important;
  flex-direction:column!important;
  min-height:calc(100vh - 180px)!important;
}
#modalVerUsuarios .usuarios-detalle-vista.oculto,
#modalVerUsuarios .usuarios-carpetas-vista.oculto{display:none!important;}
#modalVerUsuarios .usuarios-detalle-head{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  margin:12px 0!important;
}
#modalVerUsuarios .usuarios-detalle-head h3{
  margin:0!important;
  font-size:1.35rem!important;
  font-weight:900!important;
}
#modalVerUsuarios .usuarios-cards-scroll{flex:1 1 auto!important;}
@media (max-width:900px){
  #modalVerUsuarios .usuarios-carpetas-vista{grid-template-columns:1fr!important;}
  #modalVerUsuarios .usuarios-carpeta-card{min-height:170px!important;}
}

/* Ver Usuarios: carpetas reales y listado limpio */
#modalVerUsuarios .usuarios-listado-simple{
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  width:100%!important;
}
#modalVerUsuarios .usuario-lista-row{
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr) auto auto!important;
  align-items:center!important;
  gap:14px!important;
  padding:14px 16px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:18px!important;
  background:rgba(4,12,28,.76)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.25)!important;
}
#modalVerUsuarios .usuario-lista-foto{
  width:54px!important;
  height:54px!important;
  border-radius:16px!important;
  object-fit:cover!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:1.8rem!important;
}
#modalVerUsuarios .usuario-lista-main{min-width:0!important;}
#modalVerUsuarios .usuario-lista-main h3{
  margin:0!important;
  font-size:1.18rem!important;
  line-height:1.1!important;
  font-weight:900!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#modalVerUsuarios .usuario-lista-main p{
  margin:4px 0 0!important;
  font-size:.84rem!important;
  opacity:.78!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#modalVerUsuarios .usuario-lista-tags{
  margin-top:8px!important;
  display:flex!important;
  gap:6px!important;
  flex-wrap:wrap!important;
}
#modalVerUsuarios .usuario-lista-tags span,
#modalVerUsuarios .usuario-lista-estado{
  padding:4px 8px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  font-size:.68rem!important;
  font-weight:800!important;
  max-width:160px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#modalVerUsuarios .usuario-lista-acciones{
  display:flex!important;
  gap:6px!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
}
#modalVerUsuarios .usuarios-proyecto-folder{
  text-align:left!important;
  width:100%!important;
}
@media(max-width:900px){
  #modalVerUsuarios .usuario-lista-row{grid-template-columns:52px minmax(0,1fr)!important;}
  #modalVerUsuarios .usuario-lista-estado,
  #modalVerUsuarios .usuario-lista-acciones{grid-column:2!important;justify-self:start!important;}
}


/* FIX Ver Usuarios: carpetas internas full pantalla y lista compacta real */
#modalVerUsuarios .modal-contenido.modal-grande{
  width:96vw!important;
  max-width:1600px!important;
  height:92vh!important;
  max-height:92vh!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
#modalVerUsuarios .usuarios-carpetas-vista,
#modalVerUsuarios .usuarios-detalle-vista{
  flex:1 1 auto!important;
  min-height:0!important;
}
#modalVerUsuarios .usuarios-detalle-vista{
  height:100%!important;
}
#modalVerUsuarios .usuarios-toolbar{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin:8px 0 10px!important;
}
#modalVerUsuarios #buscarUsuario{
  max-width:520px!important;
  flex:1 1 360px!important;
}
#modalVerUsuarios #resumenUsuarios{
  display:none!important;
}
#modalVerUsuarios .usuarios-cards-scroll{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:auto!important;
  padding-right:6px!important;
}
#modalVerUsuarios .usuarios-cards-grid{
  display:block!important;
  width:100%!important;
}
#modalVerUsuarios .usuarios-listado-simple{
  max-width:100%!important;
}
#modalVerUsuarios .usuario-lista-row{
  min-height:72px!important;
  margin-bottom:10px!important;
}
#modalVerUsuarios .usuarios-proyecto-folder{
  min-height:96px!important;
  padding:16px 18px!important;
  margin-bottom:12px!important;
}
#modalVerUsuarios .usuarios-proyecto-folder .usuarios-carpeta-icono{
  font-size:2rem!important;
}
#modalVerUsuarios .usuarios-proyecto-folder strong{
  font-size:1.12rem!important;
}

/* VER USUARIOS - estilo agrupado compacto como credenciales pequeñas */
#modalVerUsuarios:not(.oculto){align-items:stretch!important;justify-content:center!important;}
#modalVerUsuarios .modal-contenido.modal-grande{
  width:98vw!important;
  max-width:none!important;
  height:96vh!important;
  max-height:96vh!important;
  margin:2vh auto!important;
  border-radius:22px!important;
  overflow:hidden!important;
}
#modalVerUsuarios .usuarios-carpetas-vista{
  grid-template-columns:repeat(auto-fit,minmax(220px,320px))!important;
  justify-content:start!important;
  align-content:start!important;
  gap:16px!important;
  padding:8px 4px 18px!important;
  overflow:auto!important;
}
#modalVerUsuarios .usuarios-carpeta-card{
  min-height:132px!important;
  max-width:320px!important;
  padding:16px 18px!important;
  border-radius:18px!important;
  gap:7px!important;
}
#modalVerUsuarios .usuarios-carpeta-icono{font-size:2.15rem!important;}
#modalVerUsuarios .usuarios-carpeta-card strong{font-size:1.14rem!important;}
#modalVerUsuarios .usuarios-carpeta-card small{font-size:.76rem!important;line-height:1.28!important;}
#modalVerUsuarios .usuarios-detalle-vista{
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
}
#modalVerUsuarios .usuarios-detalle-head{
  flex:0 0 auto!important;
  padding:2px 0 4px!important;
}
#modalVerUsuarios .usuarios-toolbar{
  flex:0 0 auto!important;
}
#modalVerUsuarios .usuarios-cards-scroll{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:auto!important;
  padding:6px 4px 18px!important;
}
#modalVerUsuarios .usuarios-listado-agrupado{
  display:flex!important;
  flex-direction:column!important;
  gap:16px!important;
}
#modalVerUsuarios .usuarios-grupo-compacto{
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.045)!important;
  border-radius:18px!important;
  padding:12px!important;
}
#modalVerUsuarios .usuarios-grupo-header{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin-bottom:10px!important;
  padding:0 4px!important;
}
#modalVerUsuarios .usuarios-grupo-header strong{
  font-size:1rem!important;
  font-weight:900!important;
  color:#fff!important;
}
#modalVerUsuarios .usuarios-grupo-header span{
  font-size:.72rem!important;
  font-weight:900!important;
  color:#d9f8ff!important;
  border:1px solid rgba(87,232,255,.25)!important;
  background:rgba(87,232,255,.10)!important;
  border-radius:999px!important;
  padding:4px 8px!important;
}
#modalVerUsuarios .usuarios-mini-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(128px,1fr))!important;
  gap:12px!important;
}
#modalVerUsuarios .usuario-lista-row.usuario-mini-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-height:188px!important;
  padding:10px 8px!important;
  gap:7px!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,rgba(10,20,45,.92),rgba(4,10,24,.96))!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.24)!important;
  text-align:center!important;
  margin:0!important;
}
#modalVerUsuarios .usuario-lista-row.usuario-mini-card:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(87,232,255,.42)!important;
  box-shadow:0 0 22px rgba(87,232,255,.13),0 14px 30px rgba(0,0,0,.30)!important;
}
#modalVerUsuarios .usuario-mini-card .usuario-lista-foto{
  width:72px!important;
  height:72px!important;
  min-width:72px!important;
  border-radius:12px!important;
  border:2px solid rgba(87,232,255,.34)!important;
  object-fit:cover!important;
  background:rgba(255,255,255,.08)!important;
  box-shadow:0 8px 18px rgba(0,0,0,.22)!important;
}
#modalVerUsuarios .usuario-mini-card .usuario-lista-main{
  width:100%!important;
  min-width:0!important;
}
#modalVerUsuarios .usuario-mini-card .usuario-lista-main h3{
  font-size:.82rem!important;
  line-height:1.12!important;
  min-height:2.2em!important;
  max-height:2.2em!important;
  white-space:normal!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  margin:0!important;
}
#modalVerUsuarios .usuario-mini-card .usuario-lista-main p{
  font-size:.66rem!important;
  line-height:1.1!important;
  margin:3px 0 0!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  opacity:.78!important;
}
#modalVerUsuarios .usuario-mini-card .usuario-lista-tags{
  display:flex!important;
  justify-content:center!important;
  gap:4px!important;
  margin-top:6px!important;
  max-height:40px!important;
  overflow:hidden!important;
}
#modalVerUsuarios .usuario-mini-card .usuario-lista-tags span{
  max-width:96px!important;
  padding:3px 6px!important;
  font-size:.54rem!important;
  line-height:1!important;
  border-radius:999px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#modalVerUsuarios .usuario-mini-card .usuario-lista-estado{
  position:absolute!important;
  top:7px!important;
  right:7px!important;
  font-size:.52rem!important;
  padding:3px 6px!important;
  max-width:70px!important;
}
#modalVerUsuarios .usuario-mini-card{position:relative!important;}
#modalVerUsuarios .usuario-mini-card .usuario-lista-acciones{
  width:100%!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:4px!important;
  margin-top:auto!important;
}
#modalVerUsuarios .usuario-mini-card .usuario-lista-acciones .btn-mini-glass{
  font-size:.54rem!important;
  padding:4px 5px!important;
  border-radius:8px!important;
  min-height:24px!important;
}
#modalVerUsuarios .usuarios-proyecto-folder{
  min-height:92px!important;
  max-width:none!important;
  padding:13px 15px!important;
}
@media(max-width:900px){
  #modalVerUsuarios .usuarios-mini-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))!important;}
  #modalVerUsuarios .usuario-lista-row.usuario-mini-card{min-height:178px!important;}
  #modalVerUsuarios .usuario-mini-card .usuario-lista-foto{width:64px!important;height:64px!important;min-width:64px!important;}
}


/* ===== VER USUARIOS - VISTA FINAL TIPO CARPETAS / ÁLBUM ===== */
#modalVerUsuarios .modal-header-pro h2{
  font-size:1.35rem!important;
  letter-spacing:.04em!important;
}
#modalVerUsuarios .usuarios-nota-minima{
  opacity:.55!important;
}
#modalVerUsuarios .usuarios-toolbar,
#modalVerUsuarios #resumenUsuarios,
#modalVerUsuarios #filtroEmpresaVerUsuarios,
#modalVerUsuarios #filtroProyectoVerUsuarios,
#modalVerUsuarios #buscarUsuario{
  display:none!important;
}
#modalVerUsuarios .usuarios-carpetas-vista{
  grid-template-columns:repeat(2, minmax(220px, 360px))!important;
  justify-content:center!important;
  align-items:start!important;
  gap:28px!important;
  padding:28px 18px!important;
}
#modalVerUsuarios .usuarios-carpeta-card{
  min-height:210px!important;
  align-items:center!important;
  text-align:center!important;
  border-radius:28px!important;
}
#modalVerUsuarios .usuarios-carpeta-icono{
  font-size:4.4rem!important;
}
#modalVerUsuarios .usuarios-detalle-head{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  margin:2px 0 18px!important;
  padding:0 4px!important;
}
#modalVerUsuarios .usuarios-detalle-head h3{
  margin:0!important;
  font-size:1.15rem!important;
  font-weight:900!important;
  color:#ffffff!important;
}
#modalVerUsuarios .usuarios-cards-scroll{
  min-height:0!important;
  max-height:calc(100vh - 245px)!important;
  overflow:auto!important;
  border:none!important;
  background:transparent!important;
  padding:6px 2px 18px!important;
}
#modalVerUsuarios .usuarios-cards-grid{
  display:block!important;
}
#modalVerUsuarios .usuarios-listado-album{
  width:100%!important;
}
#modalVerUsuarios .usuarios-grupo-sin-titulo{
  margin:0!important;
  padding:0!important;
  border:none!important;
  background:transparent!important;
}
#modalVerUsuarios .usuarios-grupo-sin-titulo .usuarios-grupo-header{
  display:none!important;
}
#modalVerUsuarios .usuarios-album-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill, minmax(126px, 136px))!important;
  gap:14px!important;
  justify-content:start!important;
  align-items:start!important;
  padding:4px!important;
}
#modalVerUsuarios .usuario-lista-row.usuario-mini-card.usuario-album-card{
  width:126px!important;
  min-height:166px!important;
  padding:10px 8px!important;
  border-radius:16px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  background:linear-gradient(180deg,rgba(8,24,55,.88),rgba(3,11,28,.96))!important;
  border:1px solid rgba(78,190,255,.22)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.24)!important;
  overflow:hidden!important;
}
#modalVerUsuarios .usuario-album-card .usuario-lista-foto{
  width:78px!important;
  height:78px!important;
  min-width:78px!important;
  border-radius:14px!important;
  object-fit:cover!important;
  margin:0 0 8px!important;
  border:2px solid rgba(82,210,255,.45)!important;
}
#modalVerUsuarios .usuario-album-card .usuario-lista-main{
  width:100%!important;
  text-align:center!important;
}
#modalVerUsuarios .usuario-album-card .usuario-lista-main h3{
  font-size:.76rem!important;
  font-weight:900!important;
  line-height:1.08!important;
  color:#fff!important;
  margin:0 0 5px!important;
  min-height:2.22em!important;
  max-height:2.22em!important;
  overflow:hidden!important;
  word-break:normal!important;
}
#modalVerUsuarios .usuario-album-card .usuario-lista-main p{
  font-size:.61rem!important;
  line-height:1.05!important;
  color:#40b8ff!important;
  margin:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#modalVerUsuarios .usuario-album-card .usuario-lista-tags,
#modalVerUsuarios .usuario-album-card .usuario-lista-estado,
#modalVerUsuarios .usuario-album-card .usuario-lista-acciones,
#modalVerUsuarios .usuario-album-card .usuario-card-acciones{
  display:none!important;
}
#modalVerUsuarios .usuarios-proyecto-folder{
  min-height:150px!important;
  width:150px!important;
  padding:12px!important;
  text-align:center!important;
  align-items:center!important;
}
#modalVerUsuarios .usuarios-proyecto-folder .usuarios-carpeta-icono{
  font-size:3.2rem!important;
}
#modalVerUsuarios .usuarios-proyecto-folder strong{
  font-size:.92rem!important;
}
#modalVerUsuarios .usuarios-proyecto-folder small{
  font-size:.68rem!important;
}
@media(max-width:900px){
  #modalVerUsuarios .usuarios-carpetas-vista{grid-template-columns:1fr!important;}
  #modalVerUsuarios .usuarios-album-grid{grid-template-columns:repeat(auto-fill, minmax(106px, 1fr))!important;}
  #modalVerUsuarios .usuario-lista-row.usuario-mini-card.usuario-album-card{width:auto!important;min-height:148px!important;}
}


/* FIX FINAL VER USUARIOS - letras completas en tarjetas tipo album */
#modalVerUsuarios .usuario-lista-row.usuario-mini-card.usuario-album-card .usuario-lista-main{
  width:100% !important;
  text-align:center !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:3px !important;
}

#modalVerUsuarios .usuario-lista-row.usuario-mini-card.usuario-album-card .usuario-lista-main h3{
  width:100% !important;
  max-width:112px !important;
  min-height:2.35em !important;
  max-height:none !important;
  margin:0 auto 2px !important;
  padding:0 2px !important;
  font-size:.78rem !important;
  line-height:1.12 !important;
  font-weight:900 !important;
  text-align:center !important;
  color:#ffffff !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  display:block !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
}

#modalVerUsuarios .usuario-lista-row.usuario-mini-card.usuario-album-card .usuario-lista-main p{
  width:100% !important;
  max-width:116px !important;
  margin:0 auto !important;
  padding:0 2px !important;
  font-size:.62rem !important;
  line-height:1.12 !important;
  font-weight:700 !important;
  text-align:center !important;
  color:#4fc3ff !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  display:block !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
}

#modalVerUsuarios .usuario-lista-row.usuario-mini-card.usuario-album-card{
  min-height:182px !important;
  height:auto !important;
}


/* ESM Proyectos y Bases - foto proyecto/base */
#modalProyectosPuestos .pp-foto-preview-wrap{display:flex!important;align-items:center!important;gap:10px!important;border:1px dashed rgba(56,189,248,.28)!important;border-radius:16px!important;padding:10px!important;background:rgba(15,23,42,.55)!important;}
#modalProyectosPuestos .pp-foto-preview{width:86px!important;height:62px!important;border-radius:14px!important;object-fit:cover!important;background:rgba(2,6,23,.8)!important;border:1px solid rgba(125,211,252,.25)!important;}
#modalProyectosPuestos .pp-foto-placeholder{width:86px!important;height:62px!important;border-radius:14px!important;display:grid!important;place-items:center!important;background:rgba(15,23,42,.9)!important;border:1px solid rgba(125,211,252,.25)!important;font-size:28px!important;}
#modalProyectosPuestos .pp-foto-label{display:flex!important;flex-direction:column!important;gap:4px!important;font-size:12px!important;color:#bae6fd!important;font-weight:800!important;}
#modalProyectosPuestos .pp-item-flex{display:flex!important;gap:12px!important;align-items:flex-start!important;}
#modalProyectosPuestos .pp-item-photo{width:92px!important;height:72px!important;border-radius:16px!important;object-fit:cover!important;border:1px solid rgba(125,211,252,.24)!important;background:rgba(2,6,23,.8)!important;flex:0 0 auto!important;}
#modalProyectosPuestos .pp-item-photo-fallback{width:92px!important;height:72px!important;border-radius:16px!important;display:grid!important;place-items:center!important;border:1px solid rgba(125,211,252,.24)!important;background:rgba(15,23,42,.75)!important;font-size:32px!important;flex:0 0 auto!important;}
#modalVerUsuarios .usuarios-proyecto-folder .usuarios-proyecto-foto{width:72px!important;height:72px!important;border-radius:18px!important;object-fit:cover!important;border:1px solid rgba(125,211,252,.35)!important;box-shadow:0 8px 22px rgba(0,0,0,.28)!important;}

/* Horario por puesto/relevante - Software ESM */
.horario-form-grid-puestos-esm{grid-template-columns:repeat(3,minmax(180px,1fr))!important;align-items:end!important;}
.horario-resumen-puesto{border:1px solid rgba(56,189,248,.35);border-radius:18px;padding:14px 16px;background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(37,99,235,.08));color:#eaf7ff;display:flex;flex-direction:column;gap:4px;min-height:72px;}
.horario-resumen-puesto strong{font-size:1rem;letter-spacing:.02em;}
.horario-resumen-puesto small{color:#9bdcff;font-size:.82rem;}
.horario-resumen-puesto .ok{color:#5dff9a;font-weight:800;}
.horario-resumen-puesto .pendiente{color:#ffd166;font-weight:800;}
.horario-bloques-panel{margin-top:16px;border:1px solid rgba(56,189,248,.18);border-radius:22px;padding:16px;background:rgba(2,8,23,.28);}
.horario-bloques-head{margin-bottom:12px!important;}
.horario-bloque-form-esm{grid-template-columns:repeat(4,minmax(170px,1fr))!important;}
.horario-bloque-actions{display:flex;gap:8px;align-items:end;flex-wrap:wrap;}
.horario-bloques-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:12px;}
.bloque-horario-card{border:1px solid rgba(125,211,252,.22);border-radius:16px;padding:12px;background:rgba(15,23,42,.55);box-shadow:0 10px 22px rgba(0,0,0,.16);}
.bloque-horario-card strong{display:block;color:#fff;font-size:.95rem;}
.bloque-horario-card small{display:block;color:#9ccdf8;margin-top:3px;font-size:.78rem;}
.bloque-horario-card button{margin-top:8px;border:0;border-radius:999px;padding:6px 10px;background:rgba(248,113,113,.18);color:#fecaca;cursor:pointer;}
@media(max-width:900px){.horario-form-grid-puestos-esm,.horario-bloque-form-esm{grid-template-columns:1fr!important;}}


/* HORARIO NUEVO LIMPIO: ocultar campos antiguos de roles/dias */
#modalHorario [id^="hmLunes"],#modalHorario [id^="hmMartes"],#modalHorario [id^="hmMiercoles"],#modalHorario [id^="hmJueves"],#modalHorario [id^="hmViernes"],#modalHorario [id^="hmSabado"],#modalHorario [id^="hmDomingo"],
#modalHorario #horarioRolSelect,#modalHorario #horarioJornadaSelect,#modalHorario #horarioEntradaInput,#modalHorario #horarioSalidaInput,#modalHorario #horarioInicioCicloSelect,
#modalHorario #horarioVacacionesCheck,#modalHorario #horarioCubreLibreCheck,#modalHorario #horarioEstadoEspecialCheck{display:none!important}
#modalHorario .horario-vacaciones-box,#modalHorario .horario-cubre-libre-box,#modalHorario .horario-estado-especial-box{display:none!important}
#modalHorario .horario-resumen-puesto{min-height:84px;display:flex;flex-direction:column;justify-content:center;gap:6px;border:1px solid rgba(80,180,255,.35);border-radius:18px;padding:14px 16px;background:rgba(4,22,55,.55)}
#modalHorario .horario-resumen-puesto strong{font-size:18px;color:#fff}
#modalHorario .horario-resumen-puesto small{font-size:13px;color:#bfe9ff}

/* Horario nuevo ESM - rotativo/fijo/cubre integrado */
.horario-tipo-panel{margin-top:16px;border:1px solid rgba(55,210,255,.18);border-radius:18px;padding:16px;background:rgba(3,15,30,.45)}
.horario-bloques-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:12px}
.bloque-horario-card{border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px;background:rgba(7,18,34,.76);color:#eaf8ff}
.bloque-horario-card strong{display:block;font-size:13px}
.bloque-horario-card small{display:block;color:#a7c9d7;font-size:12px;margin-top:4px}
.turno-dia{box-shadow:inset 0 0 0 1px rgba(59,211,255,.18)}
.turno-noche{box-shadow:inset 0 0 0 1px rgba(153,109,255,.22)}
.turno-libre{box-shadow:inset 0 0 0 1px rgba(255,204,77,.2)}
.horarios-table-panel-pro{display:none!important}


/* ESM Horario completo semanal por proyecto */
.horario-excel-header{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:0 0 12px;padding:10px 12px;border:1px solid rgba(125,211,252,.22);border-radius:14px;background:rgba(2,6,23,.42);color:#dff7ff}
.horario-excel-header strong{font-size:18px;color:#fff}.horario-excel-header span{font-size:13px;color:#bdefff}
.horario-semanal-proyecto th small{display:block;font-size:10px;opacity:.72;margin-top:3px}.horario-semanal-proyecto td{vertical-align:middle}.horario-semanal-proyecto td:nth-child(3){min-width:180px;font-size:12px;color:#cfefff}
.turno-dia-mini,.turno-tarde-mini,.turno-noche-mini,.turno-libre-mini{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:70px;padding:6px 8px;border-radius:10px;font-size:12px;font-weight:800;border:1px solid rgba(255,255,255,.14)}
.turno-dia-mini{background:rgba(250,204,21,.18);color:#fde68a}.turno-tarde-mini{background:rgba(251,146,60,.18);color:#fed7aa}.turno-noche-mini{background:rgba(96,165,250,.18);color:#bfdbfe}.turno-libre-mini{background:rgba(148,163,184,.15);color:#e5e7eb}
.turno-dia-mini small,.turno-tarde-mini small,.turno-noche-mini small{font-size:10px;font-weight:700;opacity:.85}.horario-leyenda-mini{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* ESM Horario - panel derecho de días pendientes (solo visual/cálculo, no toca módulos estables) */
#modalHorario .horario-dias-pendientes-panel{
  grid-column: span 2;
  border:1px solid rgba(125,211,252,.26);
  border-radius:18px;
  padding:14px;
  background:linear-gradient(145deg,rgba(7,18,34,.92),rgba(8,34,55,.72));
  box-shadow:0 14px 32px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
  color:#eaf8ff;
  min-height:108px;
}
#modalHorario .horario-dias-pendientes-panel>strong{display:block;font-size:15px;color:#fff;margin-bottom:4px;}
#modalHorario .horario-dias-pendientes-panel>small{display:block;color:#9ccdf8;font-size:12px;margin-bottom:10px;}
#modalHorario .horario-dias-pendientes-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;max-height:260px;overflow:auto;padding-right:3px;}
#modalHorario .horario-dia-pendiente{border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:10px 11px;background:rgba(15,23,42,.72);display:grid;gap:5px;}
#modalHorario .horario-dia-pendiente div{display:flex;align-items:center;justify-content:space-between;gap:8px;}
#modalHorario .horario-dia-pendiente b{font-size:13px;color:#fff;text-transform:capitalize;}
#modalHorario .horario-dia-pendiente span{font-size:11px;color:#b6cbe0;}
#modalHorario .horario-dia-pendiente small{font-size:12px;color:#dbeafe;line-height:1.25;}
#modalHorario .horario-dia-pendiente em{font-style:normal;font-size:11px;color:#9ccdf8;}
#modalHorario .horario-dia-pendiente.ok{border-color:rgba(34,197,94,.35);background:rgba(22,101,52,.22);}
#modalHorario .horario-dia-pendiente.medio{border-color:rgba(250,204,21,.42);background:rgba(113,63,18,.28);}
#modalHorario .horario-dia-pendiente.alto{border-color:rgba(248,113,113,.46);background:rgba(127,29,29,.30);}
#modalHorario .horario-total-pendiente{margin-top:10px;border-top:1px solid rgba(255,255,255,.10);padding-top:10px;color:#dff7ff;font-size:13px;}
#modalHorario .horario-total-pendiente b{color:#fef08a;}
@media (min-width:1180px){#modalHorario .horario-form-grid-puestos-esm{grid-template-columns:repeat(4,minmax(0,1fr));}#modalHorario .horario-dias-pendientes-panel{grid-column:span 2;}}


/* ESM FIX: Nuevo Horario por Relevante - resumen + horas pendientes en la misma tarjeta/fila */
#modalHorario .horario-resumen-pendientes-row{
  grid-column: 1 / -1 !important;
  display:grid !important;
  grid-template-columns:minmax(280px,.92fr) minmax(320px,1.08fr) !important;
  gap:14px !important;
  align-items:stretch !important;
  width:100% !important;
}
#modalHorario .horario-resumen-pendientes-row .horario-resumen-puesto,
#modalHorario .horario-resumen-pendientes-row .horario-dias-pendientes-panel{
  min-height:118px !important;
}
#modalHorario .horario-resumen-pendientes-row .horario-dias-pendientes-panel{
  grid-column:auto !important;
  margin:0 !important;
}
#modalHorario .horario-resumen-pendientes-row .horario-dias-pendientes-lista{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
  max-height:170px !important;
}
@media(max-width:900px){
  #modalHorario .horario-resumen-pendientes-row{
    grid-template-columns:1fr !important;
  }
}



/* ESM Horario - ficha premium de puesto dentro de Nuevo Horario por Relevante */
.horario-resumen-puesto .horario-resumen-head{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:10px;
}
.horario-ficha-puesto{
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:12px;
  align-items:stretch;
  margin-top:10px;
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(56,189,248,.22);
  background:linear-gradient(135deg,rgba(15,23,42,.72),rgba(8,47,73,.44));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.horario-ficha-foto{
  width:96px;
  min-height:92px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(125,211,252,.28);
  background:rgba(2,6,23,.72);
  display:grid;
  place-items:center;
}
.horario-ficha-foto-img{
  width:100%;
  height:100%;
  min-height:92px;
  object-fit:cover;
  display:block;
}
.horario-ficha-foto-placeholder{
  width:100%;
  height:100%;
  min-height:92px;
  display:grid;
  place-items:center;
  font-size:34px;
  font-weight:900;
  color:#e0f2fe;
  background:radial-gradient(circle at top,rgba(56,189,248,.28),rgba(15,23,42,.95));
}
.horario-ficha-info{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}
.horario-ficha-linea{
  font-size:12px;
  color:#dbeafe;
  line-height:1.25;
}
.horario-ficha-linea b,
.horario-ficha-notas b{
  color:#7dd3fc;
}
.horario-ficha-notas{
  margin-top:3px;
  padding:8px;
  border-radius:14px;
  background:rgba(2,6,23,.42);
  border:1px solid rgba(148,163,184,.14);
  color:#e5f6ff;
  font-size:12px;
  line-height:1.3;
}
.horario-ficha-notas span{
  display:block;
  margin-top:3px;
  color:#cbd5e1;
  white-space:pre-wrap;
}
@media (max-width: 760px){
  .horario-ficha-puesto{
    grid-template-columns:1fr;
  }
  .horario-ficha-foto{
    width:100%;
    min-height:130px;
  }
}

/* ESM Horario Completo: Libre amarillo brillante y fila Cubre Libre automática */
.turno-libre-mini.horario-libre-amarillo-esm,.horario-libre-amarillo-esm{
  background:linear-gradient(135deg,#fff700,#facc15)!important;
  color:#1f1600!important;
  border:2px solid #fef08a!important;
  box-shadow:0 0 14px rgba(250,204,21,.75), inset 0 0 0 1px rgba(255,255,255,.55)!important;
}
.turno-libre-mini.horario-libre-amarillo-esm small{color:#3b2f00!important;font-weight:900!important;}
.turno-cubrelibre-mini{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:76px;
  padding:6px 8px;border-radius:10px;font-size:12px;font-weight:900;
  background:linear-gradient(135deg,rgba(34,197,94,.95),rgba(16,185,129,.85))!important;
  color:#052e16!important;border:1px solid rgba(187,247,208,.9)!important;
  box-shadow:0 0 14px rgba(34,197,94,.45), inset 0 0 0 1px rgba(255,255,255,.35)!important;
}
.turno-cubrelibre-mini small{display:block;font-size:10px;line-height:1.1;margin-top:2px;white-space:normal;color:#064e3b!important;font-weight:800!important;}


/* ===== PLANILLA: CARPETAS PREPLANILLA / PLANILLA / EXTRAS ===== */
.planilla-carpetas-esm{
  display:grid;
  grid-template-columns:repeat(3,minmax(220px,1fr));
  gap:22px;
  margin:24px 0 10px;
}
.planilla-carpeta-card{
  border:1px solid rgba(0,230,255,.35);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(4,22,58,.95),rgba(0,70,140,.45));
  color:#fff;
  padding:28px 24px;
  min-height:190px;
  text-align:left;
  cursor:pointer;
  box-shadow:0 18px 40px rgba(0,0,0,.28), inset 0 0 18px rgba(0,230,255,.10);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.planilla-carpeta-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.75);
  box-shadow:0 20px 55px rgba(0,230,255,.22), 0 0 18px rgba(255,255,255,.28);
}
.planilla-carpeta-icono{
  display:block;
  font-size:54px;
  line-height:1;
  margin-bottom:14px;
}
.planilla-carpeta-card strong{
  display:block;
  font-size:25px;
  letter-spacing:.04em;
  margin-bottom:10px;
}
.planilla-carpeta-card small{
  display:block;
  color:rgba(235,248,255,.88);
  font-size:15px;
  line-height:1.45;
}
.planilla-trabajo-esm.oculto{display:none!important;}
.planilla-subheader-esm{
  display:flex;
  align-items:center;
  gap:18px;
  margin:16px 0 12px;
  padding:14px 16px;
  border:1px solid rgba(0,230,255,.25);
  border-radius:18px;
  background:rgba(2,20,52,.55);
}
.planilla-subheader-esm h3{
  margin:2px 0 2px;
  font-size:24px;
  color:#fff;
}
@media (max-width:900px){
  .planilla-carpetas-esm{grid-template-columns:1fr;}
}


/* ===== FIX 152 PLANILLA / PREPLANILLA: nombres limpios ===== */
#modalPlanilla #planillaTrabajoESM .planilla-subheader-esm{
  display:none !important;
}
#modalPlanilla .modal-header-pro h2#planillaHeaderTituloESM{
  text-transform:uppercase;
}
#modalPlanilla .modal-header-pro{
  align-items:center;
}
#modalPlanilla .modal-header-pro .nota{
  max-width:900px;
}

/* PLANILLA CARPETAS RESPONSIVE ESM */
@media (max-width: 1100px){
  .planilla-carpetas-esm{grid-template-columns:1fr!important;}
}

/* ESM 263 · Crear Empresas premium conectado */
.empresa-toolbar-auto{display:flex;align-items:center;gap:14px}.empresa-toolbar-auto .input-modal{flex:1}.empresa-auto-sync{white-space:nowrap;font-size:12px;font-weight:800;color:#69efc1;border:1px solid rgba(53,239,174,.28);background:rgba(25,180,128,.09);padding:10px 13px;border-radius:12px}
.empresas-lista{display:grid;gap:15px}.empresa-item-card-pro{display:block!important;padding:20px!important;border-radius:20px!important;background:linear-gradient(135deg,rgba(8,38,85,.86),rgba(3,17,43,.94))!important;border:1px solid rgba(49,151,255,.52)!important;box-shadow:0 14px 32px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05)!important}.empresa-card-cabecera{display:flex;align-items:center;gap:16px}.empresa-card-cabecera .empresa-logo-mini{width:84px;height:84px;border-radius:17px;border:1px solid rgba(54,161,255,.65);background:rgba(0,12,34,.66);display:grid;place-items:center;overflow:hidden;flex:0 0 auto}.empresa-card-cabecera .empresa-logo-mini img{width:100%;height:100%;object-fit:contain;padding:7px}.empresa-card-titulo{flex:1;min-width:0}.empresa-card-titulo strong{display:block;font-size:22px!important;color:#fff}.empresa-card-titulo p{margin:8px 0 0!important}.empresa-card-menu{font-size:25px;color:#dcecff;line-height:1}.empresa-card-datos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:17px;padding:15px 0;border-top:1px solid rgba(110,174,255,.18);border-bottom:1px solid rgba(110,174,255,.18)}.empresa-dato{padding:0 14px;border-right:1px solid rgba(110,174,255,.16);color:#d9e8ff;font-size:13px}.empresa-dato:first-child{padding-left:0}.empresa-dato:last-child{border-right:0}.empresa-dato strong{font-size:13px!important;color:#fff;display:block;margin-top:4px}.empresa-licencia-vigente{color:#67f1bc!important}.empresa-licencia-alerta{color:#ffd16b!important}.empresa-licencia-vencida{color:#ff7d90!important}.empresa-card-acciones{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.empresa-card-acciones button{min-height:46px;border-radius:12px;border:1px solid rgba(35,157,255,.7);background:linear-gradient(180deg,rgba(13,83,164,.52),rgba(5,48,112,.66));color:#8fd8ff;font-weight:900;font-size:14px;cursor:pointer}.empresa-card-acciones button:hover{filter:brightness(1.18);transform:translateY(-1px)}.empresa-card-acciones .btn-empresa-licencia{border-color:rgba(129,78,255,.72);color:#c7aeff;background:linear-gradient(180deg,rgba(75,37,163,.50),rgba(34,20,94,.68))}.empresa-editar-modal{max-width:650px!important}.empresa-editar-body{display:grid;gap:14px;padding:10px}.empresa-editar-preview{width:120px;height:120px;margin:0 auto 8px;border:1px solid rgba(46,152,255,.65);border-radius:22px;background:rgba(2,17,45,.75);display:grid;place-items:center;overflow:hidden}.empresa-editar-preview img{width:100%;height:100%;object-fit:contain;padding:9px}.empresa-editar-preview .empresa-logo-placeholder{font-size:48px}
@media(max-width:900px){.empresa-card-datos{grid-template-columns:1fr 1fr;gap:12px}.empresa-dato{border-right:0;padding:0}.empresa-toolbar-auto{align-items:stretch;flex-direction:column}.empresa-auto-sync{text-align:center}.empresa-card-acciones{grid-template-columns:1fr}}


/* ZIP 63 - Crear Usuarios full pantalla (cambio aislado) */
#modalCrearUsuario.modal-crear-usuario-full{padding:0;background:rgba(1,8,18,.96);align-items:stretch;justify-content:stretch;overflow:auto}
#modalCrearUsuario .crear-usuario-shell{width:100%;min-height:100vh;padding:28px 34px 30px;box-sizing:border-box;background:radial-gradient(circle at 12% 0%,rgba(0,190,255,.14),transparent 32%),linear-gradient(145deg,#03101d,#07192b 55%,#020b14);color:#eef8ff}
#modalCrearUsuario .crear-usuario-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:0 0 24px;border-bottom:1px solid rgba(76,192,255,.22)}
#modalCrearUsuario .crear-usuario-header h2{margin:7px 0 6px;font-size:clamp(28px,3vw,46px);letter-spacing:-.02em}
#modalCrearUsuario .crear-usuario-header p{margin:0;max-width:850px;color:#9ebbd0;font-size:15px;line-height:1.55}
#modalCrearUsuario .crear-usuario-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,.7fr);gap:24px;margin-top:24px}
#modalCrearUsuario .crear-usuario-card{background:linear-gradient(155deg,rgba(12,35,57,.94),rgba(4,17,30,.96));border:1px solid rgba(47,173,230,.28);border-radius:24px;padding:26px;box-shadow:0 22px 70px rgba(0,0,0,.28)}
#modalCrearUsuario .crear-usuario-card-title{display:flex;gap:15px;align-items:center;margin-bottom:24px}
#modalCrearUsuario .crear-usuario-card-title>span{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#00bfe8;color:#00131c;font-weight:900}
#modalCrearUsuario .crear-usuario-card-title h3{margin:0 0 3px;font-size:21px}
#modalCrearUsuario .crear-usuario-card-title p{margin:0;color:#89a9bf;font-size:13px}
#modalCrearUsuario .crear-usuario-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
#modalCrearUsuario .crear-campo{display:flex;flex-direction:column;gap:8px;color:#cfe9f7;font-size:13px;font-weight:800}
#modalCrearUsuario .crear-campo-completo{grid-column:1/-1}
#modalCrearUsuario .input-modal{width:100%;box-sizing:border-box;min-height:52px;margin:0;background:#061423;border:1px solid #244a63;border-radius:14px;color:#fff;padding:0 15px;outline:none}
#modalCrearUsuario .input-modal:focus{border-color:#00d8ff;box-shadow:0 0 0 3px rgba(0,216,255,.12)}
#modalCrearUsuario .empresa-preview{margin-top:18px;background:#071a2b;border:1px solid rgba(0,216,255,.22);border-radius:16px;padding:13px}
#modalCrearUsuario .crear-pasos{display:grid;gap:13px}
#modalCrearUsuario .crear-paso{display:flex;gap:13px;align-items:flex-start;padding:14px;border-radius:15px;background:rgba(4,20,34,.75);border:1px solid rgba(83,151,190,.18)}
#modalCrearUsuario .crear-paso b{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;background:#102e45;color:#7edfff}
#modalCrearUsuario .crear-paso.activo b{background:#10d18b;color:#001b12}
#modalCrearUsuario .crear-paso strong{display:block;color:#eefaff;margin-bottom:3px}
#modalCrearUsuario .crear-paso small{color:#8faec2;line-height:1.45}
#modalCrearUsuario .crear-usuario-seguridad{margin-top:18px;padding:17px;border-radius:16px;background:rgba(0,216,255,.08);border:1px solid rgba(0,216,255,.22)}
#modalCrearUsuario .crear-usuario-seguridad p{margin:7px 0 0;color:#a8c4d5;line-height:1.5;font-size:13px}
#modalCrearUsuario .crear-usuario-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:24px;padding:20px 0 0;border-top:1px solid rgba(76,192,255,.18)}
#modalCrearUsuario .crear-edicion-box{display:flex;align-items:center;gap:12px;flex:1;flex-wrap:wrap}
#modalCrearUsuario #editarUsuarioCreado{max-width:430px}
#modalCrearUsuario .crear-usuario-guardar{min-width:230px;min-height:54px;font-size:16px;font-weight:900}
@media(max-width:920px){#modalCrearUsuario .crear-usuario-shell{padding:20px}#modalCrearUsuario .crear-usuario-layout{grid-template-columns:1fr}#modalCrearUsuario .crear-usuario-grid{grid-template-columns:1fr}#modalCrearUsuario .crear-usuario-header,#modalCrearUsuario .crear-usuario-footer{flex-direction:column}#modalCrearUsuario .crear-usuario-guardar{width:100%}}

#modalCrearUsuario .crear-campo-ayuda{color:#82a9bf;font-size:11px;font-weight:600;line-height:1.4}
#modalCrearUsuario #nuevoEmpresa:disabled{opacity:1;color:#dff8ff;background:#0a2235;border-color:#1b8fb8;cursor:not-allowed}


/* ZIP 70 · Registro inicial administrativo */
#modalRegistroAdministrativoInicial.modal-registro-admin-inicial{position:fixed;inset:0;z-index:100000;background:rgba(1,7,15,.97);padding:0;align-items:stretch;justify-content:stretch;overflow:auto}
#modalRegistroAdministrativoInicial .registro-admin-shell{width:100%;min-height:100vh;box-sizing:border-box;padding:28px 34px;background:radial-gradient(circle at 10% 0%,rgba(0,196,255,.14),transparent 34%),linear-gradient(145deg,#03101d,#07192b 58%,#020a12);color:#eefaff}
#modalRegistroAdministrativoInicial .registro-admin-header{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;padding-bottom:22px;border-bottom:1px solid rgba(84,193,243,.23)}
#modalRegistroAdministrativoInicial h2{margin:7px 0 6px;font-size:clamp(29px,3.4vw,48px)}
#modalRegistroAdministrativoInicial .registro-admin-header p{margin:0;color:#9ebbd0}
#modalRegistroAdministrativoInicial .registro-admin-badge{padding:10px 15px;border-radius:999px;background:rgba(255,190,40,.12);border:1px solid rgba(255,190,40,.35);color:#ffd77d;font-weight:900}
#modalRegistroAdministrativoInicial .registro-admin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:24px}
#modalRegistroAdministrativoInicial .registro-admin-card{padding:24px;border-radius:22px;background:linear-gradient(155deg,rgba(12,35,57,.96),rgba(4,17,30,.98));border:1px solid rgba(47,173,230,.28);box-shadow:0 22px 65px rgba(0,0,0,.28)}
#modalRegistroAdministrativoInicial .registro-admin-card h3{margin:0 0 20px;font-size:20px}
#modalRegistroAdministrativoInicial label{display:flex;flex-direction:column;gap:8px;margin-bottom:15px;color:#d4ecf8;font-size:13px;font-weight:800}
#modalRegistroAdministrativoInicial .input-modal{width:100%;min-height:50px;box-sizing:border-box;margin:0;background:#061423;border:1px solid #244a63;border-radius:13px;color:#fff;padding:12px 14px}
#modalRegistroAdministrativoInicial textarea.input-modal{min-height:92px;resize:vertical}
#modalRegistroAdministrativoInicial .registro-admin-foto-box{min-height:170px;align-items:center;justify-content:center;text-align:center;border:1px dashed #2aaedc;border-radius:18px;background:rgba(0,190,232,.07);cursor:pointer}
#modalRegistroAdministrativoInicial .registro-admin-foto-box input{position:absolute;opacity:0;pointer-events:none}
#modalRegistroAdministrativoInicial .registro-admin-foto-box>span{font-size:39px}
#modalRegistroAdministrativoInicial .registro-admin-foto-box small{color:#89a9bf}
#modalRegistroAdministrativoInicial .registro-admin-seguridad{margin-top:20px;padding:17px;border-radius:16px;background:rgba(0,216,255,.07);border:1px solid rgba(0,216,255,.2)}
#modalRegistroAdministrativoInicial .registro-admin-seguridad h4{margin:0 0 6px}
#modalRegistroAdministrativoInicial .registro-admin-seguridad p{margin:0 0 15px;color:#91afc2;font-size:12px;line-height:1.5}
#modalRegistroAdministrativoInicial .registro-admin-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;padding-top:20px;border-top:1px solid rgba(84,193,243,.2)}
#modalRegistroAdministrativoInicial .registro-admin-footer p{margin:0;color:#9ebbd0}
#modalRegistroAdministrativoInicial #btnGuardarRegistroAdministrativo{min-width:230px;min-height:54px;font-weight:900}
body.esm-registro-inicial-activo{overflow:hidden}
@media(max-width:1050px){#modalRegistroAdministrativoInicial .registro-admin-grid{grid-template-columns:1fr}#modalRegistroAdministrativoInicial .registro-admin-footer,#modalRegistroAdministrativoInicial .registro-admin-header{flex-direction:column}#modalRegistroAdministrativoInicial #btnGuardarRegistroAdministrativo{width:100%}}

/* ZIP 71 · formulario administrativo visible y botón volver */
#modalRegistroAdministrativoInicial:not(.oculto){display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;}
#modalRegistroAdministrativoInicial .registro-admin-header-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;}
#modalRegistroAdministrativoInicial #btnVolverRegistroAdministrativo{min-height:44px;white-space:nowrap;}
@media(max-width:700px){#modalRegistroAdministrativoInicial .registro-admin-header-actions{width:100%;justify-content:stretch}#modalRegistroAdministrativoInicial #btnVolverRegistroAdministrativo{width:100%}}

/* ZIP 73 · Crear Usuarios futurista aislado */
#modalCrearUsuario.modal-crear-usuario-full{position:fixed;inset:0;z-index:99999;padding:0;overflow:auto;background:#010914}
#modalCrearUsuario .crear-usuario-futurista{min-height:100vh;padding:14px 18px 18px;background:
 radial-gradient(circle at 72% 8%,rgba(0,129,255,.16),transparent 24%),
 radial-gradient(circle at 18% 100%,rgba(0,207,255,.10),transparent 28%),
 linear-gradient(145deg,#020b16,#03101d 50%,#010712);color:#f4f9ff;position:relative;overflow:hidden}
#modalCrearUsuario .crear-usuario-futurista:before{content:"";position:absolute;inset:8px;pointer-events:none;border:1px solid rgba(0,191,255,.5);clip-path:polygon(0 3%,2% 0,68% 0,69% .5%,96% .5%,100% 4%,100% 96%,98% 100%,3% 100%,0 97%);box-shadow:inset 0 0 30px rgba(0,168,255,.08)}
#modalCrearUsuario .cu-futurista-header{position:relative;z-index:1;min-height:108px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 28px 18px;border-bottom:1px solid rgba(0,183,255,.32);background:linear-gradient(90deg,rgba(4,18,34,.94),rgba(2,10,20,.72));clip-path:polygon(0 0,100% 0,100% 75%,98% 100%,35% 100%,33% 84%,0 84%)}
#modalCrearUsuario .cu-brand{display:flex;align-items:center;gap:20px}.cu-brand-logo{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(255,181,0,.4))}
#modalCrearUsuario .cu-brand-kicker{font-size:11px;letter-spacing:.24em;color:#ffbd24;font-weight:900}
#modalCrearUsuario .cu-brand h2{margin:2px 0 2px;font-size:clamp(29px,2.7vw,48px);letter-spacing:.01em}.cu-brand p{margin:0;color:#c8d8e6;font-size:15px}
#modalCrearUsuario .cu-btn-volver{min-height:54px;padding:0 28px;border:1px solid #d89b00;background:linear-gradient(180deg,rgba(30,24,5,.95),rgba(9,14,20,.95));color:#ffc735;font-weight:950;font-size:15px;letter-spacing:.03em;clip-path:polygon(8% 0,92% 0,100% 30%,100% 70%,92% 100%,8% 100%,0 70%,0 30%);box-shadow:0 0 20px rgba(255,186,0,.16),inset 0 0 18px rgba(255,174,0,.07);cursor:pointer}
#modalCrearUsuario .cu-futurista-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .86fr 1.03fr 1.12fr;gap:14px;margin:12px 10px 0}
#modalCrearUsuario .cu-panel{min-width:0;background:linear-gradient(160deg,rgba(4,20,36,.98),rgba(1,10,20,.98));border:1px solid rgba(0,177,255,.62);padding:18px;box-shadow:inset 0 0 24px rgba(0,119,204,.06),0 12px 35px rgba(0,0,0,.26);clip-path:polygon(5% 0,95% 0,100% 5%,100% 95%,95% 100%,5% 100%,0 95%,0 5%)}
#modalCrearUsuario .cu-panel-title{display:flex;align-items:center;gap:13px;margin-bottom:20px}.cu-panel-title>span{width:47px;height:47px;display:grid;place-items:center;border:1px solid #00b9ff;background:linear-gradient(145deg,#0a426c,#031725);color:#e8f9ff;font-size:18px;font-weight:950;clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);box-shadow:0 0 16px rgba(0,187,255,.38)}
#modalCrearUsuario .cu-panel-title h3{margin:0 0 3px;font-size:17px;letter-spacing:.02em}.cu-panel-title p{margin:0;color:#9bb3c7;font-size:12px}
#modalCrearUsuario .cu-campos-stack{display:grid;gap:14px}.cu-campo{display:grid;gap:7px;color:#f0f5fb;font-size:12px;font-weight:900}.cu-campo small{font-size:10px;color:#68bdda;font-weight:600;line-height:1.35}
#modalCrearUsuario .cu-campo .input-modal,#modalCrearUsuario .cu-select-cargo{height:44px;min-height:44px;margin:0;padding:0 13px;border-radius:6px;border:1px solid #0874a8;background:linear-gradient(180deg,#061827,#03101d);color:#eef8ff;box-shadow:inset 0 0 14px rgba(0,134,208,.08)}
#modalCrearUsuario .cu-campo .input-modal:focus,#modalCrearUsuario .cu-select-cargo:focus{border-color:#00d4ff;box-shadow:0 0 0 2px rgba(0,213,255,.11),0 0 14px rgba(0,192,255,.17)}
#modalCrearUsuario .cu-tipo-cards{display:grid;gap:16px}.cu-tipo-card{position:relative;min-height:142px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:20px 20px 20px 92px;border:1px solid #077ab2;background:linear-gradient(145deg,rgba(3,31,52,.94),rgba(2,13,23,.98));cursor:pointer;clip-path:polygon(6% 0,94% 0,100% 8%,100% 92%,94% 100%,6% 100%,0 92%,0 8%)}
#modalCrearUsuario .cu-tipo-card input{position:absolute;right:15px;top:15px;accent-color:#00c8ff}.cu-tipo-icon{position:absolute;left:23px;font-size:50px;color:#00c9ff;text-shadow:0 0 18px currentColor}.cu-tipo-card strong{font-size:17px}.cu-tipo-card small{margin-top:8px;color:#a8c8db;line-height:1.6}.cu-tipo-card.operativo{border-color:#966800}.cu-tipo-card.operativo .cu-tipo-icon,.cu-tipo-card.operativo strong{color:#ffba18}
#modalCrearUsuario .cu-tipo-card:has(input:checked){box-shadow:inset 0 0 28px rgba(0,192,255,.15),0 0 18px rgba(0,172,255,.18)}#modalCrearUsuario .cu-tipo-card.operativo:has(input:checked){box-shadow:inset 0 0 28px rgba(255,174,0,.12),0 0 18px rgba(255,174,0,.12)}
#modalCrearUsuario .cu-aviso-operativo{margin-top:18px;padding:16px;border:1px solid #075d87;background:rgba(0,96,150,.12);color:#00cfff;font-size:12px;line-height:1.65;clip-path:polygon(4% 0,96% 0,100% 18%,100% 82%,96% 100%,4% 100%,0 82%,0 18%)}
#modalCrearUsuario .cu-cargo-grupo h4{margin:0 0 13px;color:#00cdfa;font-size:13px}.cu-cargo-grupo h4 small{font-size:11px;font-weight:600}.cu-select-cargo{width:100%;margin-bottom:13px}
#modalCrearUsuario .cu-lista-cargos{display:grid;gap:5px;max-height:480px;overflow:auto;padding-right:5px}.cu-cargo-opcion{display:flex;align-items:center;gap:9px;padding:7px 8px;border:1px solid transparent;color:#e6eef5;font-size:12px;cursor:pointer}.cu-cargo-opcion:hover,.cu-cargo-opcion.activo{border-color:rgba(0,196,255,.45);background:rgba(0,139,210,.11)}.cu-cargo-radio{width:16px;height:16px;border:1px solid #8eb2c8;border-radius:50%;display:grid;place-items:center}.cu-cargo-opcion.activo .cu-cargo-radio:after{content:"";width:8px;height:8px;border-radius:50%;background:#00cfff;box-shadow:0 0 10px #00cfff}
#modalCrearUsuario .cu-avatar-holo{height:145px;display:grid;place-items:center;background:radial-gradient(circle,rgba(75,48,190,.26),transparent 55%)}.cu-avatar-holo>div{width:116px;height:116px;border:1px solid #5c5cff;border-radius:50%;display:grid;place-items:center;color:#8f7bff;font-size:48px;box-shadow:0 0 25px rgba(112,91,255,.36),inset 0 0 25px rgba(112,91,255,.18)}
#modalCrearUsuario .cu-resumen-lista{border:1px solid #085f8d}.cu-resumen-lista>div{display:grid;grid-template-columns:46% 54%;gap:8px;padding:10px 12px;border-bottom:1px solid rgba(0,145,210,.22);font-size:11px}.cu-resumen-lista>div:last-child{border-bottom:0}.cu-resumen-lista span{color:#c6d8e6}.cu-resumen-lista strong{font-weight:700;color:#eaf8ff;overflow:hidden;text-overflow:ellipsis}.cu-estado-activo{color:#41e48b!important}
#modalCrearUsuario .cu-nota-correo{margin-top:14px;padding:14px;border:1px solid #6d39b7;background:rgba(76,30,136,.16);color:#c49aff;font-size:11px;line-height:1.55}
#modalCrearUsuario .cu-futurista-footer{position:relative;z-index:1;display:grid;grid-template-columns:1.5fr .9fr .85fr;gap:14px;margin:14px 10px 0}.cu-correo-card,.cu-edicion-box,.cu-btn-crear{min-height:112px;border:1px solid rgba(0,177,255,.58);background:linear-gradient(150deg,rgba(3,22,38,.98),rgba(1,10,18,.98));clip-path:polygon(4% 0,96% 0,100% 15%,100% 85%,96% 100%,4% 100%,0 85%,0 15%)}
#modalCrearUsuario .cu-correo-card{display:flex;align-items:center;gap:22px;padding:18px 26px}.cu-correo-icon{width:72px;height:72px;border:1px solid #00b8ff;border-radius:50%;display:grid;place-items:center;color:#00c8ff;font-size:34px;box-shadow:0 0 20px rgba(0,190,255,.28),inset 0 0 18px rgba(0,190,255,.15)}.cu-correo-card strong{font-size:16px}.cu-correo-card p{margin:6px 0 0;color:#b4c8d7;font-size:12px;line-height:1.5}
#modalCrearUsuario .cu-edicion-box{padding:15px;display:flex;align-items:center;justify-content:center;gap:8px;flex-direction:column}.cu-edicion-box .btn-modal{width:100%;margin:0}.cu-edicion-box .input-modal{width:100%;margin:0;min-height:40px}
#modalCrearUsuario .cu-btn-crear{border-color:#f1b400;color:#ffd047;display:flex;align-items:center;justify-content:center;gap:16px;padding:18px;cursor:pointer;box-shadow:inset 0 0 30px rgba(255,174,0,.13),0 0 19px rgba(255,174,0,.16)}.cu-btn-crear>span{font-size:42px}.cu-btn-crear strong{display:block;font-size:20px;letter-spacing:.03em}.cu-btn-crear small{display:block;margin-top:5px;color:#fff1c2;font-size:11px}
#modalCrearUsuario .empresa-preview{margin-top:12px;border-radius:7px}
@media(max-width:1250px){#modalCrearUsuario .cu-futurista-grid{grid-template-columns:1fr 1fr}.cu-panel-resumen{grid-column:2}.cu-futurista-footer{grid-template-columns:1fr 1fr!important}.cu-correo-card{grid-column:1/-1}}
@media(max-width:760px){#modalCrearUsuario .cu-futurista-header{clip-path:none;flex-direction:column;align-items:stretch;padding:16px}.cu-brand-logo{width:55px;height:55px}.cu-btn-volver{width:100%}.cu-futurista-grid{grid-template-columns:1fr!important;margin:10px 0 0!important}.cu-panel-resumen{grid-column:auto}.cu-futurista-footer{grid-template-columns:1fr!important;margin:10px 0 0!important}.cu-correo-card{grid-column:auto}.crear-usuario-futurista{padding:8px!important}}

/* ==========================================================
   CHAT EMPRESARIAL PC - AJUSTE VISUAL FINAL SOLICITADO
   Solo presentación: flecha, identidad Empresa/Usuario y filtro Grupos.
   ========================================================== */
#modalChatEmpresa .chat-oper-header-pc-final{
  min-height:138px!important;
  height:138px!important;
  padding:10px 18px 10px 76px!important;
  align-items:stretch!important;
  overflow:visible!important;
}
#modalChatEmpresa .chat-layout-pro.chat-central-premium-final{
  grid-template-rows:138px minmax(0,1fr) 42px!important;
}
#modalChatEmpresa #cerrarChatEmpresa{
  top:18px!important;
  left:18px!important;
  right:auto!important;
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  padding:0!important;
  border-radius:14px!important;
  font-size:27px!important;
  line-height:1!important;
  display:grid!important;
  place-items:center!important;
}
#modalChatEmpresa .chat-oper-brand-pc-final{
  min-width:620px!important;
  display:grid!important;
  grid-template-columns:220px minmax(380px,1fr)!important;
  grid-template-rows:auto auto!important;
  column-gap:18px!important;
  row-gap:8px!important;
  align-content:center!important;
}
#modalChatEmpresa .chat-title-row-pc{
  grid-column:1!important;
  grid-row:1!important;
  align-self:end!important;
}
#modalChatEmpresa .chat-title-row-pc h1{
  margin:0!important;
  color:#fff!important;
  font-size:27px!important;
  font-weight:950!important;
  letter-spacing:-.5px!important;
  white-space:nowrap!important;
  text-shadow:0 0 18px rgba(95,190,255,.55)!important;
}
#modalChatEmpresa .chat-identidad-pc{
  grid-column:2!important;
  grid-row:1/3!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  min-height:82px!important;
  padding:9px 12px!important;
  border:1px solid rgba(119,199,255,.28)!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,rgba(12,35,61,.88),rgba(6,18,34,.88))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 22px rgba(0,145,255,.16)!important;
}
#modalChatEmpresa .chat-identidad-card{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}
#modalChatEmpresa .chat-identidad-usuario{justify-content:flex-end!important;text-align:right!important;}
#modalChatEmpresa .chat-identidad-card .chat-logo-empresa-principal,
#modalChatEmpresa .chat-identidad-card .chat-user-avatar-small{
  flex:0 0 52px!important;
  width:52px!important;
  height:52px!important;
  border-radius:13px!important;
  border:1px solid rgba(179,224,255,.55)!important;
  box-shadow:0 0 17px rgba(43,158,255,.42)!important;
}
#modalChatEmpresa .chat-identidad-card small{
  display:block!important;
  margin-bottom:2px!important;
  color:#72caff!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:1.3px!important;
}
#modalChatEmpresa .chat-identidad-card strong{
  display:block!important;
  max-width:180px!important;
  color:#f5fbff!important;
  font-size:14px!important;
  font-weight:900!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#modalChatEmpresa .chat-identidad-card em{
  display:block!important;
  max-width:180px!important;
  margin-top:2px!important;
  color:#9fb8cf!important;
  font-size:10px!important;
  font-style:normal!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#modalChatEmpresa .chat-identidad-separador{
  width:1px!important;
  height:52px!important;
  background:linear-gradient(transparent,rgba(112,199,255,.6),transparent)!important;
}
#modalChatEmpresa .chat-tabs-wa.chat-tabs-pc-final{
  grid-column:1!important;
  grid-row:2!important;
  display:flex!important;
  gap:5px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
#modalChatEmpresa .chat-tabs-pc-final button{
  min-width:0!important;
  height:28px!important;
  padding:0 9px!important;
  border:1px solid rgba(111,188,255,.22)!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.04)!important;
  color:#a9c4dc!important;
  font-size:10px!important;
  font-weight:850!important;
  box-shadow:none!important;
}
#modalChatEmpresa .chat-tabs-pc-final button.activo,
#modalChatEmpresa .chat-tabs-pc-final button:hover{
  color:#fff!important;
  border-color:rgba(39,190,255,.72)!important;
  background:linear-gradient(135deg,rgba(0,145,255,.42),rgba(0,229,255,.16))!important;
  box-shadow:0 0 13px rgba(0,154,255,.3)!important;
}
#modalChatEmpresa .chat-oper-badge{
  align-self:center!important;
  margin-left:14px!important;
}
#modalChatEmpresa .chat-oper-actions{
  align-self:center!important;
  margin-right:0!important;
  min-width:330px!important;
}
@media(max-width:1350px){
  #modalChatEmpresa .chat-oper-header-pc-final{padding-right:12px!important;}
  #modalChatEmpresa .chat-oper-brand-pc-final{min-width:560px!important;grid-template-columns:200px minmax(340px,1fr)!important;}
  #modalChatEmpresa .chat-oper-badge{display:none!important;}
  #modalChatEmpresa .chat-oper-actions{min-width:260px!important;}
  #modalChatEmpresa .chat-oper-search{width:200px!important;min-width:200px!important;}
}

/* =========================================================
   CHAT EMPRESARIAL PC — REDISEÑO TOTAL 2026 (SOLO VISUAL)
   ========================================================= */
#modalChatEmpresa{padding:0!important;background:#020b16!important;z-index:12000!important;}
#modalChatEmpresa .esm-chat-nuevo{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;overflow:hidden!important;background:#020b16!important;box-shadow:none!important;}
.esm-chat-shell{height:100%;display:grid;grid-template-columns:minmax(360px,34%) minmax(0,1fr);font-family:Inter,Segoe UI,Arial,sans-serif;color:#eff8ff;background:radial-gradient(circle at 15% 5%,rgba(0,183,255,.12),transparent 30%),linear-gradient(135deg,#020b16,#061522 58%,#020b16);}
.esm-chat-sidebar{position:relative;min-width:0;display:flex;flex-direction:column;padding:22px 20px 14px;border-right:1px solid rgba(21,197,255,.24);background:linear-gradient(180deg,rgba(5,19,32,.98),rgba(2,13,24,.98));box-shadow:18px 0 55px rgba(0,0,0,.25);overflow:hidden;}
.esm-chat-titlebar{display:flex;align-items:center;gap:16px;padding:2px 2px 18px;}
.esm-chat-back{width:48px;height:48px;border-radius:50%;border:1px solid rgba(41,193,255,.55);background:rgba(5,27,45,.75);color:#fff;font-size:30px;line-height:1;cursor:pointer;box-shadow:0 0 24px rgba(0,174,255,.13);}
.esm-chat-titlebar h2{margin:0;font-size:28px;line-height:1.05;letter-spacing:-.7px;color:#fff;text-shadow:0 0 18px rgba(41,193,255,.25)}
.esm-chat-titlebar p{margin:6px 0 0;color:#a9bfd0;font-size:13px;}
.esm-chat-identity{display:grid;grid-template-columns:1fr 1px 1fr;align-items:center;gap:15px;padding:14px;border:1px solid rgba(31,181,244,.42);border-radius:18px;background:linear-gradient(135deg,rgba(12,34,53,.94),rgba(6,23,39,.92));box-shadow:inset 0 0 25px rgba(0,160,255,.035),0 12px 28px rgba(0,0,0,.22);}
.esm-identity-half{display:flex;align-items:center;gap:12px;min-width:0}.esm-identity-half.usuario{justify-content:flex-start}.esm-identity-divider{height:72px;background:linear-gradient(transparent,#28c9ff,transparent);opacity:.55}
.esm-identity-photo,.esm-identity-avatar{width:66px;height:66px;flex:0 0 66px;border-radius:14px;object-fit:cover;border:1px solid #22c5ff;background:#071928;display:grid;place-items:center;font-weight:800;color:#eaffff;box-shadow:0 0 20px rgba(0,183,255,.17)}
.esm-identity-half span{display:block;color:#21d6ff;font-size:11px;font-weight:900;letter-spacing:.7px}.esm-identity-half strong{display:block;margin-top:4px;color:#fff;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.esm-identity-half small{display:block;margin-top:3px;color:#8da9ba;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.esm-chat-datetime{margin-top:12px;display:grid;grid-template-columns:1fr 1px 1fr;align-items:center;gap:12px;padding:12px 14px;border:1px solid rgba(31,181,244,.38);border-radius:16px;background:rgba(7,24,40,.86)}.esm-chat-datetime>div{display:flex;align-items:center;gap:10px;min-width:0}.esm-chat-datetime i{height:40px;background:#208dc0;opacity:.55}.esm-chat-datetime span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;border:1px solid #1cbcf5;background:#0b2033;color:#65ddff}.esm-chat-datetime strong{font-size:13px;white-space:nowrap}
.esm-chat-search{margin-top:14px;height:48px;display:flex;align-items:center;gap:12px;padding:0 16px;border-radius:15px;background:#142432;border:1px solid rgba(255,255,255,.04)}.esm-chat-search span{font-size:26px;color:#c8dce7}.esm-chat-search input{width:100%;border:0;outline:0;background:transparent;color:#eaf6fb;font-size:14px}.esm-chat-search input::placeholder{color:#98adba}
.esm-chat-tabs{display:flex;gap:9px;padding:13px 0 12px}.esm-chat-tabs button{border:1px solid rgba(123,161,181,.25);border-radius:20px;padding:8px 14px;background:#142331;color:#e9f4f9;font-weight:700;font-size:12px;cursor:pointer}.esm-chat-tabs button.activo{color:#28f0b2;border-color:#0ab983;background:rgba(0,122,88,.16);box-shadow:0 0 16px rgba(0,211,150,.08)}
.esm-chat-list{flex:1;min-height:0;overflow:auto;margin:0 -20px;padding:0 8px 10px}.esm-chat-list::-webkit-scrollbar{width:5px}.esm-chat-list::-webkit-scrollbar-thumb{background:#17658a;border-radius:8px}
#modalChatEmpresa .lista-personas-chat-wa>div,#modalChatEmpresa .esm-chat-list>div{min-height:74px!important;margin:0!important;padding:12px 18px!important;border:0!important;border-bottom:1px solid rgba(137,179,200,.08)!important;border-radius:0!important;background:transparent!important;transition:.18s ease}#modalChatEmpresa .esm-chat-list>div:hover{background:rgba(31,128,172,.12)!important}#modalChatEmpresa .esm-chat-list img{width:48px!important;height:48px!important;border-radius:50%!important;object-fit:cover!important;border:1px solid rgba(42,202,255,.4)!important}
.esm-chat-sidebar-tools{height:42px;display:flex;align-items:center;justify-content:center;gap:10px;padding-top:8px;border-top:1px solid rgba(54,159,205,.15)}.esm-chat-sidebar-tools .wa-rail-btn{position:relative;width:38px;height:34px;border-radius:10px;border:1px solid rgba(42,190,246,.25);background:#0a1d2c;color:#bcecff;cursor:pointer}.esm-chat-sidebar-tools .wa-rail-btn span{display:none}.esm-chat-sidebar-tools b{position:absolute;right:-4px;top:-5px;border-radius:10px;background:#ff4060;color:#fff;font-size:9px;padding:1px 4px}
.esm-chat-main{position:relative;min-width:0;display:grid;grid-template-rows:82px auto auto minmax(0,1fr) 82px;background-color:#03111d;background-image:linear-gradient(rgba(0,12,22,.8),rgba(0,12,22,.8)),radial-gradient(circle at 70% 12%,rgba(0,169,222,.09),transparent 34%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%231a5268' stroke-width='.7' opacity='.28'%3E%3Ccircle cx='20' cy='20' r='8'/%3E%3Cpath d='M55 8l8 8-8 8-8-8zM105 23h17v11h-17zM132 68c8-10 18 2 8 10s-18-2-8-10zM16 105h24M28 93v24M72 116c8-15 22-4 17 8s-21 8-17-8zM108 102l20 20M128 102l-20 20'/%3E%3C/g%3E%3C/svg%3E");}
.esm-conversation-header{display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid rgba(47,159,207,.18);background:rgba(3,17,29,.92);backdrop-filter:blur(12px)}.esm-conversation-person{display:flex;align-items:center;gap:13px}.esm-conversation-person #chatAvatarCanal{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#123349;border:2px solid #16c7b3;font-size:22px}.esm-conversation-person h3{margin:0;color:#fff;font-size:20px}.esm-conversation-person p{margin:4px 0 0;color:#21dda7;font-size:13px}.esm-conversation-actions{display:flex;gap:8px}.esm-conversation-actions button{width:43px;height:43px;border:0;border-radius:50%;background:transparent;color:#d9e9f0;font-size:23px;cursor:pointer}.esm-conversation-actions button:hover{background:rgba(31,170,219,.12)}
.esm-chat-mini-date{justify-self:end;margin:12px 24px 0;display:flex;align-items:center;gap:11px;padding:9px 16px;border:1px solid rgba(37,183,242,.35);border-radius:14px;background:rgba(4,20,33,.82);font-size:12px}.esm-chat-mini-date i{width:1px;height:25px;background:#2687ac}.esm-chat-mini-date span{color:#6ce5ff;font-size:18px}
.esm-chat-pinned{margin:10px 28px 0!important;padding:10px 13px!important;border:0!important;border-left:3px solid #21c9ff!important;border-radius:8px!important;background:rgba(7,31,47,.68)!important;color:#d9eff9!important}.esm-chat-pinned strong{color:#54dafa!important}.esm-chat-pinned span{color:#9cb6c4!important}
.esm-chat-messages{min-height:0!important;height:auto!important;overflow:auto!important;padding:22px 42px!important;background:transparent!important}.esm-chat-messages::-webkit-scrollbar{width:6px}.esm-chat-messages::-webkit-scrollbar-thumb{background:#155572;border-radius:10px}
#modalChatEmpresa .chat-mensaje-item,#modalChatEmpresa .mensaje-chat{max-width:72%!important;border-radius:13px!important;background:#172632!important;border:1px solid rgba(255,255,255,.035)!important;box-shadow:0 8px 20px rgba(0,0,0,.14)!important}#modalChatEmpresa .chat-mensaje-item.propio,#modalChatEmpresa .mensaje-chat.propio{margin-left:auto!important;background:linear-gradient(135deg,#006e5a,#00856b)!important;color:#fff!important}
.esm-chat-composer{margin:0!important;padding:13px 28px!important;display:flex!important;align-items:center!important;gap:10px!important;border-top:1px solid rgba(52,149,190,.18)!important;background:rgba(3,17,29,.96)!important}.esm-chat-composer .btn-chat-icon{width:44px!important;height:44px!important;border-radius:50%!important;border:0!important;background:transparent!important;color:#e9f8ff!important;font-size:27px!important}.esm-chat-composer textarea{height:50px!important;min-height:50px!important;max-height:110px!important;padding:14px 20px!important;border-radius:25px!important;border:1px solid rgba(103,147,167,.12)!important;background:#152633!important;color:#fff!important;resize:none!important}.esm-chat-composer .btn-chat-send{width:52px!important;height:52px!important;border-radius:50%!important;border:0!important;background:linear-gradient(135deg,#18d4ff,#0d85ff)!important;color:#fff!important;font-size:23px!important;box-shadow:0 0 24px rgba(0,169,255,.28)!important}
@media(max-width:1050px){.esm-chat-shell{grid-template-columns:340px minmax(0,1fr)}.esm-chat-sidebar{padding-left:14px;padding-right:14px}.esm-chat-list{margin-left:-14px;margin-right:-14px}.esm-identity-photo,.esm-identity-avatar{width:54px;height:54px;flex-basis:54px}.esm-identity-half strong{font-size:14px}.esm-chat-datetime strong{font-size:11px}.esm-chat-messages{padding-left:22px!important;padding-right:22px!important}}
@media(max-width:760px){.esm-chat-shell{grid-template-columns:1fr}.esm-chat-sidebar{display:none}.esm-chat-main{grid-column:1}.esm-chat-mini-date{display:none}.esm-chat-messages{padding:16px!important}.esm-conversation-header{padding:0 14px}.esm-chat-composer{padding:10px 12px!important}}

/* =========================================================
   CHAT EMPRESARIAL PC — AJUSTE COMPACTO FINAL (SOLO VISUAL)
   Mantiene el diseño aprobado; únicamente reduce y acomoda.
   ========================================================= */
#modalChatEmpresa .esm-chat-shell{
  grid-template-columns:minmax(330px,31%) minmax(0,1fr)!important;
}
#modalChatEmpresa .esm-chat-sidebar{
  padding:14px 16px 10px!important;
}
#modalChatEmpresa .esm-chat-titlebar{
  gap:11px!important;
  padding:0 0 11px!important;
}
#modalChatEmpresa .esm-chat-back{
  width:40px!important;
  height:40px!important;
  font-size:24px!important;
}
#modalChatEmpresa .esm-chat-titlebar h2{
  font-size:23px!important;
  line-height:1.05!important;
  letter-spacing:-.35px!important;
}
#modalChatEmpresa .esm-chat-titlebar p{
  margin-top:3px!important;
  font-size:11px!important;
}
#modalChatEmpresa .esm-chat-identity{
  gap:10px!important;
  padding:9px 11px!important;
  border-radius:14px!important;
}
#modalChatEmpresa .esm-identity-half{
  gap:9px!important;
}
#modalChatEmpresa .esm-identity-divider{
  height:48px!important;
}
#modalChatEmpresa .esm-identity-photo,
#modalChatEmpresa .esm-identity-avatar{
  width:46px!important;
  height:46px!important;
  flex-basis:46px!important;
  border-radius:11px!important;
}
#modalChatEmpresa .esm-identity-half span{
  font-size:9px!important;
}
#modalChatEmpresa .esm-identity-half strong{
  margin-top:2px!important;
  font-size:13px!important;
}
#modalChatEmpresa .esm-identity-half small{
  margin-top:2px!important;
  font-size:9px!important;
}
#modalChatEmpresa .esm-chat-datetime{
  margin-top:8px!important;
  gap:8px!important;
  padding:8px 11px!important;
  border-radius:13px!important;
}
#modalChatEmpresa .esm-chat-datetime>div{
  gap:8px!important;
}
#modalChatEmpresa .esm-chat-datetime i{
  height:28px!important;
}
#modalChatEmpresa .esm-chat-datetime span{
  width:28px!important;
  height:28px!important;
  border-radius:8px!important;
  font-size:14px!important;
}
#modalChatEmpresa .esm-chat-datetime strong{
  font-size:11px!important;
}
#modalChatEmpresa .esm-chat-search{
  margin-top:9px!important;
  height:39px!important;
  gap:9px!important;
  padding:0 12px!important;
  border-radius:12px!important;
}
#modalChatEmpresa .esm-chat-search span{
  font-size:20px!important;
}
#modalChatEmpresa .esm-chat-search input{
  font-size:12px!important;
}
#modalChatEmpresa .esm-chat-tabs{
  gap:6px!important;
  padding:9px 0 8px!important;
}
#modalChatEmpresa .esm-chat-tabs button{
  padding:6px 10px!important;
  font-size:10px!important;
}
#modalChatEmpresa .esm-chat-list{
  margin-left:-16px!important;
  margin-right:-16px!important;
}
#modalChatEmpresa .lista-personas-chat-wa>div,
#modalChatEmpresa .esm-chat-list>div{
  min-height:62px!important;
  padding:8px 14px!important;
}
#modalChatEmpresa .esm-chat-list img{
  width:40px!important;
  height:40px!important;
}
#modalChatEmpresa .esm-chat-sidebar-tools{
  height:34px!important;
  gap:8px!important;
  padding-top:5px!important;
}
#modalChatEmpresa .esm-chat-sidebar-tools .wa-rail-btn{
  width:34px!important;
  height:29px!important;
}
#modalChatEmpresa .esm-chat-main{
  grid-template-rows:68px auto auto minmax(0,1fr) 68px!important;
}
#modalChatEmpresa .esm-conversation-header{
  padding:0 22px!important;
}
#modalChatEmpresa .esm-conversation-person{
  gap:10px!important;
}
#modalChatEmpresa .esm-conversation-person #chatAvatarCanal{
  width:42px!important;
  height:42px!important;
  font-size:18px!important;
}
#modalChatEmpresa .esm-conversation-person h3{
  font-size:17px!important;
}
#modalChatEmpresa .esm-conversation-person p{
  margin-top:2px!important;
  font-size:11px!important;
}
#modalChatEmpresa .esm-conversation-actions{
  gap:5px!important;
}
#modalChatEmpresa .esm-conversation-actions button{
  width:36px!important;
  height:36px!important;
  font-size:19px!important;
}
#modalChatEmpresa .esm-chat-mini-date{
  margin:8px 18px 0!important;
  gap:8px!important;
  padding:6px 11px!important;
  border-radius:11px!important;
  font-size:10px!important;
}
#modalChatEmpresa .esm-chat-mini-date i{
  height:20px!important;
}
#modalChatEmpresa .esm-chat-mini-date span{
  font-size:14px!important;
}
#modalChatEmpresa .esm-chat-pinned{
  margin:7px 22px 0!important;
  padding:7px 10px!important;
  font-size:11px!important;
}
#modalChatEmpresa .esm-chat-messages{
  padding:16px 30px!important;
}
#modalChatEmpresa .esm-chat-composer{
  padding:8px 18px!important;
  gap:8px!important;
}
#modalChatEmpresa .esm-chat-composer .btn-chat-icon{
  width:36px!important;
  height:36px!important;
  font-size:22px!important;
}
#modalChatEmpresa .esm-chat-composer textarea{
  height:42px!important;
  min-height:42px!important;
  max-height:88px!important;
  padding:10px 16px!important;
  border-radius:21px!important;
  font-size:13px!important;
  line-height:20px!important;
}
#modalChatEmpresa .esm-chat-composer .btn-chat-send{
  width:44px!important;
  height:44px!important;
  font-size:19px!important;
}
@media(max-width:1050px){
  #modalChatEmpresa .esm-chat-shell{grid-template-columns:310px minmax(0,1fr)!important;}
  #modalChatEmpresa .esm-chat-sidebar{padding-left:12px!important;padding-right:12px!important;}
  #modalChatEmpresa .esm-chat-list{margin-left:-12px!important;margin-right:-12px!important;}
}

/* =========================================================
   CHAT EMPRESARIAL PC — AJUSTE DEFINITIVO V61
   Solo visual: corrige proporciones y fija el compositor abajo.
   ========================================================= */
#modalChatEmpresa .esm-chat-shell{
  grid-template-columns:340px minmax(0,1fr)!important;
}
#modalChatEmpresa .esm-chat-sidebar{
  padding:12px 14px 10px!important;
}
#modalChatEmpresa .esm-chat-titlebar{
  display:flex!important;
  align-items:center!important;
  min-height:54px!important;
  gap:10px!important;
  padding:0 2px 10px!important;
  overflow:visible!important;
}
#modalChatEmpresa .esm-chat-back{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  flex:0 0 38px!important;
  border-radius:12px!important;
  font-size:23px!important;
  line-height:36px!important;
  padding:0!important;
}
#modalChatEmpresa .esm-chat-titlebar>div{
  min-width:0!important;
  overflow:visible!important;
}
#modalChatEmpresa .esm-chat-titlebar h2{
  margin:0!important;
  font-size:21px!important;
  line-height:1.1!important;
  letter-spacing:-.25px!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
#modalChatEmpresa .esm-chat-titlebar p{
  margin:3px 0 0!important;
  font-size:10px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
}
#modalChatEmpresa .esm-chat-identity{
  min-height:68px!important;
  padding:8px 10px!important;
  gap:8px!important;
  border-radius:13px!important;
}
#modalChatEmpresa .esm-identity-photo,
#modalChatEmpresa .esm-identity-avatar{
  width:40px!important;
  height:40px!important;
  flex:0 0 40px!important;
  border-radius:9px!important;
}
#modalChatEmpresa .esm-identity-divider{height:42px!important;}
#modalChatEmpresa .esm-identity-half{gap:8px!important;}
#modalChatEmpresa .esm-identity-half span{font-size:8px!important;}
#modalChatEmpresa .esm-identity-half strong{font-size:11.5px!important;}
#modalChatEmpresa .esm-identity-half small{font-size:8.5px!important;}
#modalChatEmpresa .esm-chat-datetime{
  min-height:44px!important;
  margin-top:7px!important;
  padding:6px 9px!important;
  gap:7px!important;
}
#modalChatEmpresa .esm-chat-datetime span{
  width:25px!important;height:25px!important;font-size:12px!important;
}
#modalChatEmpresa .esm-chat-datetime strong{font-size:9.5px!important;}
#modalChatEmpresa .esm-chat-search{
  height:37px!important;
  margin-top:7px!important;
  padding:0 11px!important;
  gap:8px!important;
}
#modalChatEmpresa .esm-chat-search span{font-size:18px!important;}
#modalChatEmpresa .esm-chat-search input{font-size:11px!important;}
#modalChatEmpresa .esm-chat-tabs{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:6px!important;
  padding:7px 0 9px!important;
}
#modalChatEmpresa .esm-chat-tabs button{
  width:100%!important;
  min-width:0!important;
  height:30px!important;
  padding:0 5px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:12px!important;
  font-size:9.5px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
#modalChatEmpresa .esm-chat-list{
  margin-left:-14px!important;
  margin-right:-14px!important;
}
#modalChatEmpresa .esm-chat-main{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:62px auto auto minmax(0,1fr) 66px!important;
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
}
#modalChatEmpresa .esm-conversation-header{
  grid-row:1!important;
  position:relative!important;
  padding:0 18px!important;
}
#modalChatEmpresa .esm-chat-mini-date{
  grid-row:2!important;
  position:relative!important;
  align-self:start!important;
  justify-self:end!important;
  margin:7px 15px 0!important;
}
#modalChatEmpresa .esm-chat-pinned{
  grid-row:3!important;
  position:relative!important;
  margin:6px 18px 0!important;
}
#modalChatEmpresa .esm-chat-messages,
#modalChatEmpresa .chat-mensajes-pro{
  grid-row:4!important;
  position:relative!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow-y:auto!important;
  padding:14px 24px!important;
  margin:0!important;
}
#modalChatEmpresa .esm-chat-composer,
#modalChatEmpresa .chat-composer-pro{
  grid-row:5!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  width:auto!important;
  height:66px!important;
  min-height:66px!important;
  max-height:66px!important;
  margin:0!important;
  padding:9px 16px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  border-radius:0!important;
  overflow:hidden!important;
  z-index:20!important;
}
#modalChatEmpresa .esm-chat-composer .btn-chat-icon,
#modalChatEmpresa .chat-composer-pro .btn-chat-icon{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  flex:0 0 36px!important;
  font-size:20px!important;
}
#modalChatEmpresa .esm-chat-composer textarea,
#modalChatEmpresa .chat-composer-pro textarea,
#modalChatEmpresa #chatTexto{
  flex:1 1 auto!important;
  width:auto!important;
  height:42px!important;
  min-height:42px!important;
  max-height:42px!important;
  margin:0!important;
  padding:10px 15px!important;
  font-size:12.5px!important;
  line-height:20px!important;
  border-radius:20px!important;
  box-sizing:border-box!important;
}
#modalChatEmpresa .esm-chat-composer .btn-chat-send,
#modalChatEmpresa .chat-composer-pro .btn-chat-send,
#modalChatEmpresa #btnEnviarChat{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  flex:0 0 44px!important;
  font-size:19px!important;
}
@media(max-width:1050px){
  #modalChatEmpresa .esm-chat-shell{grid-template-columns:315px minmax(0,1fr)!important;}
  #modalChatEmpresa .esm-chat-titlebar h2{font-size:19px!important;}
  #modalChatEmpresa .esm-chat-tabs button{font-size:8.7px!important;}
}


/* CHAT EMPRESARIAL — BASE LIMPIA V65. No afecta otros módulos. */
#modalChatEmpresa .esm-chat-base-limpia {
  width: min(96vw, 1680px);
  height: min(92vh, 980px);
  max-width: none;
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #07111f;
  border: 1px solid rgba(58, 177, 255, .28);
  box-shadow: 0 26px 90px rgba(0, 0, 0, .58);
}
#modalChatEmpresa .esm-chat-base-header {
  height: 76px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: #0a1626;
}
#modalChatEmpresa .esm-chat-base-volver {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(58,177,255,.35);
  background: #0c1d31;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}
#modalChatEmpresa .esm-chat-base-header h2 {
  margin: 0;
  color: #fff;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: .2px;
}
#modalChatEmpresa .esm-chat-base-vacia {
  height: calc(100% - 76px);
  background: #07111f;
}

/* ESM V66 - CHAT EMPRESARIAL NUEVO DESDE CERO - SOLO MODULO CHAT */
#modalChatEmpresa{position:fixed!important;inset:0!important;z-index:999999!important;background:#020914!important;padding:0!important}
#modalChatEmpresa.oculto{display:none!important}
#modalChatEmpresa .esm-chat-nuevo-shell{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;margin:0!important;padding:8px!important;border:0!important;border-radius:0!important;display:grid!important;grid-template-columns:minmax(390px,35vw) minmax(0,1fr)!important;background:radial-gradient(circle at 30% 10%,#062246 0,#020b18 34%,#010711 100%)!important;color:#fff!important;overflow:hidden!important;box-sizing:border-box!important}
#modalChatEmpresa .esm-chat-sidebar,#modalChatEmpresa .esm-chat-main{min-width:0!important;min-height:0!important;border:1px solid #0878e8!important;background:linear-gradient(180deg,rgba(3,18,37,.98),rgba(1,10,22,.98))!important;box-shadow:0 0 18px rgba(0,119,255,.25)!important}
#modalChatEmpresa .esm-chat-sidebar{display:flex!important;flex-direction:column!important;border-radius:18px 0 0 18px!important;padding:16px!important;gap:12px!important;overflow:hidden!important}
#modalChatEmpresa .esm-chat-brandbar{display:flex!important;align-items:center!important;gap:16px!important;flex:0 0 auto!important}
#modalChatEmpresa .esm-chat-back{width:58px!important;height:58px!important;border:1px solid #0786ff!important;border-radius:12px!important;background:#03152b!important;color:#fff!important;font-size:36px!important;line-height:1!important;cursor:pointer!important;box-shadow:inset 0 0 18px rgba(0,119,255,.25)!important}
#modalChatEmpresa .esm-chat-brandbar h2{margin:0!important;font-size:30px!important;color:#fff!important;white-space:nowrap!important}.esm-chat-brandbar p{margin:2px 0 0!important;color:#b9c7d9!important;font-size:15px!important}
#modalChatEmpresa .esm-chat-identidad{display:grid!important;grid-template-columns:1fr 1.15fr!important;border:1px solid #0878e8!important;border-radius:14px!important;padding:12px!important;gap:12px!important;min-height:112px!important}
#modalChatEmpresa .esm-chat-empresa-card,#modalChatEmpresa .esm-chat-usuario-card{display:flex!important;align-items:center!important;gap:12px!important;min-width:0!important}.esm-chat-empresa-card{border-right:1px solid #164a7e!important;padding-right:10px!important}
#modalChatEmpresa .esm-chat-logo-empresa{width:76px!important;height:76px!important;object-fit:contain!important;border:1px solid #0b8bff!important;border-radius:13px!important;background:#06101d!important}.esm-chat-logo-empresa.sin-logo:before{content:'ESM'}
#modalChatEmpresa .esm-chat-avatar-usuario{width:76px!important;height:76px!important;flex:0 0 76px!important;border-radius:15px!important;border:1px solid #0b8bff!important;display:grid!important;place-items:center!important;overflow:hidden!important;background:#07172b!important;font-weight:800!important}.esm-chat-avatar-usuario img{width:100%!important;height:100%!important;object-fit:cover!important}
#modalChatEmpresa .esm-chat-identidad span{display:block!important;color:#11a8ff!important;font-size:12px!important;font-weight:800!important}.esm-chat-identidad strong{display:block!important;color:#fff!important;font-size:17px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.esm-chat-identidad small{display:block!important;color:#c1c8d2!important;font-size:13px!important}.esm-chat-identidad em{display:block!important;color:#00e54b!important;font-size:12px!important;font-style:normal!important}
#modalChatEmpresa .esm-chat-fecha-hora{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}.esm-chat-fecha-hora>div{height:52px!important;border:1px solid #0878e8!important;border-radius:12px!important;display:flex!important;align-items:center!important;gap:12px!important;padding:0 18px!important;font-size:16px!important}
#modalChatEmpresa .esm-chat-search{height:56px!important;border:1px solid #0878e8!important;border-radius:12px!important;display:grid!important;grid-template-columns:44px 1fr 54px!important;align-items:center!important;overflow:hidden!important}.esm-chat-search span{font-size:28px!important;text-align:center!important}.esm-chat-search input{height:100%!important;border:0!important;background:transparent!important;color:#fff!important;font-size:16px!important;outline:0!important}.esm-chat-search button{height:100%!important;border:0!important;border-left:1px solid #174a79!important;background:transparent!important;color:#fff!important;font-size:22px!important}
#modalChatEmpresa .esm-chat-tabs{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:10px!important}.esm-chat-tabs button{height:46px!important;border:1px solid #0878e8!important;border-radius:10px!important;background:#041326!important;color:#fff!important;font-size:15px!important}.esm-chat-tabs button.activo{background:linear-gradient(180deg,#086eff,#0a3da7)!important;box-shadow:0 0 18px rgba(0,119,255,.45)!important}
#modalChatEmpresa .esm-chat-seccion-titulo{color:#0baaff!important;font-weight:800!important;font-size:14px!important;display:flex!important;justify-content:space-between!important}
#modalChatEmpresa .esm-chat-proyectos-lista{flex:1 1 auto!important;min-height:0!important;overflow:auto!important;border:1px solid #075fae!important;border-radius:12px!important}.esm-chat-proyecto{border-bottom:1px solid #174a79!important}.esm-chat-proyecto-head{width:100%!important;height:48px!important;display:grid!important;grid-template-columns:34px 1fr auto 24px!important;align-items:center!important;border:0!important;background:#061a33!important;color:#fff!important;text-align:left!important;padding:0 12px!important}.esm-chat-proyecto-head strong{font-size:16px!important}.esm-chat-proyecto-head small{color:#b9c7d9!important}.esm-chat-miembros{display:none!important}.esm-chat-proyecto.abierto .esm-chat-miembros{display:block!important}.esm-chat-miembro{width:100%!important;min-height:46px!important;display:grid!important;grid-template-columns:34px 1fr auto 20px!important;gap:8px!important;align-items:center!important;border:0!important;background:#020e1d!important;color:#fff!important;padding:6px 12px 6px 48px!important;text-align:left!important}.esm-chat-miembro:hover,.esm-chat-miembro.activo{background:#082447!important}.esm-chat-miembro img,.esm-chat-iniciales{width:30px!important;height:30px!important;border-radius:50%!important;object-fit:cover!important;display:grid!important;place-items:center!important;background:#0d315c!important}.esm-chat-miembro strong{display:block!important;font-size:14px!important}.esm-chat-miembro small{display:block!important;color:#aeb9c7!important;font-size:11px!important}.esm-chat-miembro em{color:#00e54b!important;font-size:12px!important;font-style:normal!important}
#modalChatEmpresa .esm-chat-online{height:62px!important;flex:0 0 62px!important;border:1px solid #0878e8!important;border-radius:12px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 14px!important}.esm-chat-online>span{color:#0baaff!important}.esm-chat-online div{display:flex!important}.esm-chat-online img,.esm-chat-online div span{width:32px!important;height:32px!important;border-radius:50%!important;object-fit:cover!important;margin-left:-5px!important;border:2px solid #061222!important;background:#0b315e!important;display:grid!important;place-items:center!important}.esm-chat-online b{width:38px!important;height:38px!important;border-radius:50%!important;background:#0a2c56!important;display:grid!important;place-items:center!important}
#modalChatEmpresa .esm-chat-main{border-radius:0 18px 18px 0!important;display:grid!important;grid-template-rows:90px 86px 26px minmax(0,1fr) 92px!important;overflow:hidden!important}
#modalChatEmpresa .esm-chat-main-header{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 20px!important;border-bottom:1px solid #0b5caa!important}.esm-chat-canal-identidad{display:flex!important;align-items:center!important;gap:14px!important}.esm-chat-canal-icon{width:60px!important;height:60px!important;border:1px solid #0b8bff!important;border-radius:12px!important;display:grid!important;place-items:center!important;font-size:30px!important;background:#071a35!important}.esm-chat-main-header h3{margin:0!important;font-size:24px!important;color:#fff!important}.esm-chat-main-header p{margin:2px 0 0!important;color:#00e54b!important}.esm-chat-main-actions{display:flex!important;gap:12px!important}.esm-chat-main-actions button{width:52px!important;height:52px!important;border:1px solid #0878e8!important;border-radius:12px!important;background:#03152b!important;color:#fff!important;font-size:24px!important}
#modalChatEmpresa .esm-chat-pinned{display:grid!important;grid-template-columns:42px 1fr auto!important;align-items:center!important;gap:12px!important;padding:12px 20px!important;border-bottom:1px solid #0b5caa!important}.esm-chat-pinned>span{font-size:25px!important}.esm-chat-pinned strong{font-size:16px!important}.esm-chat-pinned p{margin:3px 0 0!important;color:#c3ccd8!important;font-size:13px!important}.esm-chat-mini-clock{display:flex!important;gap:8px!important}.esm-chat-mini-clock span{border:1px solid #0878e8!important;border-radius:10px!important;padding:12px 16px!important}
#modalChatEmpresa .esm-chat-status{font-size:11px!important;color:#5e7896!important;padding:4px 18px!important}
#modalChatEmpresa .esm-chat-messages{min-height:0!important;overflow-y:auto!important;padding:26px 22px!important;background-color:#02101f!important;background-image:radial-gradient(rgba(19,118,216,.12) 1px,transparent 1px)!important;background-size:18px 18px!important;display:flex!important;flex-direction:column!important;gap:12px!important}
#modalChatEmpresa .chat-msg{display:flex!important;gap:8px!important;align-items:flex-end!important}.chat-msg.chat-propio{justify-content:flex-start!important;flex-direction:row-reverse!important}.chat-msg-avatar{width:34px!important;height:34px!important;border-radius:50%!important;overflow:hidden!important;flex:0 0 34px!important}.chat-msg-avatar img{width:100%!important;height:100%!important;object-fit:cover!important}.chat-msg-avatar span{width:100%!important;height:100%!important;display:grid!important;place-items:center!important;background:#14518c!important}.chat-burbuja{max-width:70%!important;border-radius:14px!important;padding:10px 14px!important;background:#112338!important;border:1px solid #244866!important;color:#fff!important}.chat-propio .chat-burbuja{background:linear-gradient(180deg,#006f35,#005729)!important;border-color:#00a752!important}.chat-msg-head{display:flex!important;justify-content:space-between!important;gap:18px!important}.chat-msg-head strong{font-size:12px!important}.chat-msg-head small{font-size:10px!important;color:#b9c7d9!important}.chat-burbuja p{margin:5px 0 0!important}
#modalChatEmpresa .esm-chat-composer{display:grid!important;grid-template-columns:58px 58px 1fr 72px!important;gap:10px!important;align-items:center!important;padding:14px!important;border-top:1px solid #0b5caa!important;background:#02101f!important}.esm-chat-attach,.esm-chat-emoji,.esm-chat-send{height:58px!important;border:1px solid #0878e8!important;border-radius:12px!important;background:#03152b!important;color:#fff!important;font-size:26px!important;display:grid!important;place-items:center!important}.esm-chat-composer textarea{height:58px!important;min-height:58px!important;max-height:58px!important;resize:none!important;border:1px solid #0878e8!important;border-radius:12px!important;background:#061528!important;color:#fff!important;padding:17px 18px!important;font-size:17px!important;outline:0!important}.esm-chat-send{background:linear-gradient(180deg,#0d8dff,#0649d7)!important;box-shadow:0 0 20px rgba(0,119,255,.55)!important}.esm-chat-hidden-controls{display:none!important}
@media(max-width:1100px){#modalChatEmpresa .esm-chat-nuevo-shell{grid-template-columns:390px minmax(0,1fr)!important}.esm-chat-brandbar h2{font-size:25px!important}.esm-chat-identidad{grid-template-columns:1fr!important}.esm-chat-empresa-card{border-right:0!important;border-bottom:1px solid #164a7e!important;padding-bottom:8px!important}}

/* ESM V67 - AJUSTE COMPACTO REAL SOLO CHAT EMPRESARIAL */
#modalChatEmpresa .esm-chat-nuevo-shell{
  grid-template-columns:clamp(350px,32vw,460px) minmax(0,1fr)!important;
  padding:6px!important;
}
#modalChatEmpresa .esm-chat-sidebar{
  padding:12px!important;
  gap:9px!important;
}
#modalChatEmpresa .esm-chat-brandbar{
  position:relative!important;
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  min-height:54px!important;
  padding:0 2px!important;
  overflow:visible!important;
}
#modalChatEmpresa .esm-chat-brandbar>div{min-width:0!important;position:static!important;transform:none!important;margin:0!important;padding:0!important}
#modalChatEmpresa .esm-chat-back{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  border-radius:11px!important;
  font-size:30px!important;
  z-index:auto!important;
  margin:0!important;
}
#modalChatEmpresa .esm-chat-brandbar h2{
  margin:0!important;
  padding:0!important;
  font-size:25px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
#modalChatEmpresa .esm-chat-brandbar p{margin:3px 0 0!important;font-size:12px!important;line-height:1.1!important}
#modalChatEmpresa .esm-chat-identidad{
  grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr)!important;
  min-height:82px!important;
  padding:8px!important;
  gap:8px!important;
  border-radius:12px!important;
}
#modalChatEmpresa .esm-chat-empresa-card,#modalChatEmpresa .esm-chat-usuario-card{gap:8px!important}
#modalChatEmpresa .esm-chat-empresa-card{padding-right:7px!important}
#modalChatEmpresa .esm-chat-logo-empresa{
  width:54px!important;height:54px!important;flex:0 0 54px!important;border-radius:10px!important;
}
#modalChatEmpresa .esm-chat-avatar-usuario{
  width:54px!important;height:54px!important;flex:0 0 54px!important;border-radius:10px!important;
}
#modalChatEmpresa .esm-chat-identidad span{font-size:10px!important}
#modalChatEmpresa .esm-chat-identidad strong{font-size:14px!important;line-height:1.15!important}
#modalChatEmpresa .esm-chat-identidad small,#modalChatEmpresa .esm-chat-identidad em{font-size:10px!important;line-height:1.2!important}
#modalChatEmpresa .esm-chat-fecha-hora{gap:8px!important}
#modalChatEmpresa .esm-chat-fecha-hora>div{
  height:42px!important;padding:0 12px!important;gap:8px!important;font-size:13px!important;border-radius:10px!important;
}
#modalChatEmpresa .esm-chat-search{
  height:44px!important;grid-template-columns:38px 1fr 44px!important;border-radius:10px!important;
}
#modalChatEmpresa .esm-chat-search span{font-size:22px!important}
#modalChatEmpresa .esm-chat-search input{font-size:13px!important}
#modalChatEmpresa .esm-chat-search button{font-size:18px!important}
#modalChatEmpresa .esm-chat-tabs{gap:7px!important}
#modalChatEmpresa .esm-chat-tabs button{
  height:38px!important;padding:0 7px!important;border-radius:9px!important;font-size:12px!important;white-space:nowrap!important;
}
#modalChatEmpresa .esm-chat-seccion-titulo{font-size:12px!important;margin-top:1px!important}
#modalChatEmpresa .esm-chat-online{height:50px!important;flex-basis:50px!important;padding:0 10px!important;border-radius:10px!important;font-size:12px!important}
#modalChatEmpresa .esm-chat-online img,#modalChatEmpresa .esm-chat-online div span{width:28px!important;height:28px!important}
#modalChatEmpresa .esm-chat-main{
  grid-template-rows:72px 68px 22px minmax(0,1fr) 72px!important;
}
#modalChatEmpresa .esm-chat-main-header{padding:0 16px!important}
#modalChatEmpresa .esm-chat-canal-icon{width:48px!important;height:48px!important;font-size:24px!important;border-radius:10px!important}
#modalChatEmpresa .esm-chat-main-header h3{font-size:20px!important}
#modalChatEmpresa .esm-chat-main-header p{font-size:12px!important}
#modalChatEmpresa .esm-chat-main-actions{gap:8px!important}
#modalChatEmpresa .esm-chat-main-actions button{width:42px!important;height:42px!important;font-size:19px!important;border-radius:10px!important}
#modalChatEmpresa .esm-chat-pinned{grid-template-columns:34px 1fr auto!important;padding:8px 16px!important;gap:9px!important}
#modalChatEmpresa .esm-chat-pinned>span{font-size:20px!important}
#modalChatEmpresa .esm-chat-pinned strong{font-size:13px!important}
#modalChatEmpresa .esm-chat-pinned p{font-size:11px!important;margin-top:2px!important}
#modalChatEmpresa .esm-chat-mini-clock span{padding:8px 10px!important;font-size:11px!important;border-radius:8px!important}
#modalChatEmpresa .esm-chat-status{padding:2px 14px!important;font-size:10px!important}
#modalChatEmpresa .esm-chat-messages{padding:18px!important}
#modalChatEmpresa .esm-chat-composer{
  grid-template-columns:46px 46px minmax(0,1fr) 58px!important;
  gap:8px!important;
  padding:8px 10px!important;
  min-height:72px!important;
  align-self:stretch!important;
}
#modalChatEmpresa .esm-chat-attach,#modalChatEmpresa .esm-chat-emoji,#modalChatEmpresa .esm-chat-send{
  height:48px!important;min-height:48px!important;border-radius:10px!important;font-size:22px!important;
}
#modalChatEmpresa .esm-chat-composer textarea{
  height:48px!important;min-height:48px!important;max-height:48px!important;padding:13px 15px!important;font-size:14px!important;border-radius:10px!important;
}
@media(max-width:1180px){
  #modalChatEmpresa .esm-chat-nuevo-shell{grid-template-columns:360px minmax(0,1fr)!important}
  #modalChatEmpresa .esm-chat-brandbar h2{font-size:22px!important}
  #modalChatEmpresa .esm-chat-identidad{grid-template-columns:1fr 1.1fr!important}
}

/* ESM V68 — SOLO DOS CORRECCIONES DEL CHAT EMPRESARIAL
   1) Flecha primero y título claramente a la derecha.
   2) Fotos de empresa y usuario más pequeñas.
   No afecta Panel Principal ni otros módulos. */
#modalChatEmpresa .esm-chat-brandbar{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr)!important;
  column-gap:20px!important;
  align-items:center!important;
  padding:0 4px!important;
  overflow:visible!important;
}
#modalChatEmpresa .esm-chat-back{
  position:relative!important;
  left:0!important;
  top:0!important;
  transform:none!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  margin:0!important;
  z-index:1!important;
}
#modalChatEmpresa .esm-chat-brandbar>div{
  position:relative!important;
  left:0!important;
  top:0!important;
  transform:none!important;
  margin:0!important;
  padding-left:4px!important;
  min-width:0!important;
  z-index:2!important;
}
#modalChatEmpresa .esm-chat-brandbar h2{
  position:relative!important;
  left:0!important;
  transform:none!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
}
#modalChatEmpresa .esm-chat-identidad{
  min-height:64px!important;
  padding:6px 8px!important;
  gap:7px!important;
}
#modalChatEmpresa .esm-chat-empresa-card,
#modalChatEmpresa .esm-chat-usuario-card{
  gap:7px!important;
  min-height:48px!important;
}
#modalChatEmpresa .esm-chat-logo-empresa,
#modalChatEmpresa .esm-chat-avatar-usuario{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  flex:0 0 38px!important;
  border-radius:8px!important;
}
#modalChatEmpresa .esm-chat-identidad span{font-size:8.5px!important}
#modalChatEmpresa .esm-chat-identidad strong{font-size:12px!important}
#modalChatEmpresa .esm-chat-identidad small,
#modalChatEmpresa .esm-chat-identidad em{font-size:8.5px!important}


/* ESM V69 — NUEVO CHAT Y DATOS REALES. SOLO #modalChatEmpresa. */
#modalChatEmpresa .esm-chat-brandbar{
  grid-template-columns:42px minmax(0,1fr) auto!important;
  column-gap:14px!important;
}
#modalChatEmpresa .esm-chat-titulo-wrap{min-width:0!important;padding-left:4px!important}
#modalChatEmpresa .esm-chat-nuevo-btn{
  height:34px!important;padding:0 12px!important;border:1px solid #14a5ff!important;border-radius:9px!important;
  background:linear-gradient(180deg,#087bd8,#0751a5)!important;color:#fff!important;font-size:11px!important;font-weight:800!important;
  letter-spacing:.03em!important;white-space:nowrap!important;cursor:pointer!important;box-shadow:0 0 14px rgba(0,145,255,.3)!important;
}
#modalChatEmpresa .esm-chat-avatar-usuario img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:inherit!important}
#modalChatEmpresa .esm-chat-nuevo-panel{
  position:absolute!important;inset:0!important;z-index:80!important;display:grid!important;place-items:center!important;
  padding:24px!important;background:rgba(0,7,18,.78)!important;backdrop-filter:blur(8px)!important;
}
#modalChatEmpresa .esm-chat-nuevo-panel.oculto{display:none!important}
#modalChatEmpresa .esm-chat-nuevo-dialogo{
  width:min(720px,92vw)!important;max-height:min(760px,88vh)!important;overflow:hidden!important;border:1px solid #168dff!important;
  border-radius:18px!important;background:linear-gradient(180deg,#061a31,#020d1b)!important;box-shadow:0 24px 70px rgba(0,0,0,.65),0 0 34px rgba(0,133,255,.25)!important;color:#fff!important;
}
#modalChatEmpresa .esm-chat-nuevo-dialogo>header{display:flex!important;justify-content:space-between!important;gap:20px!important;align-items:flex-start!important;padding:22px 24px!important;border-bottom:1px solid #164f7f!important}
#modalChatEmpresa .esm-chat-nuevo-dialogo>header span{font-size:10px!important;color:#55c4ff!important;font-weight:800!important;letter-spacing:.12em!important}
#modalChatEmpresa .esm-chat-nuevo-dialogo>header h3{margin:4px 0!important;font-size:25px!important}
#modalChatEmpresa .esm-chat-nuevo-dialogo>header p{margin:0!important;color:#a8bdd2!important;font-size:12px!important}
#modalChatEmpresa #cerrarNuevoChatEmpresa{width:38px!important;height:38px!important;border:1px solid #236ca8!important;border-radius:10px!important;background:#07182a!important;color:#fff!important;font-size:25px!important;cursor:pointer!important}
#modalChatEmpresa .esm-chat-nuevo-pasos{display:grid!important;grid-template-columns:250px minmax(0,1fr)!important;gap:16px!important;padding:20px!important;max-height:620px!important}
#modalChatEmpresa .esm-chat-nuevo-pasos section{min-width:0!important;display:flex!important;flex-direction:column!important;gap:10px!important}
#modalChatEmpresa .esm-chat-nuevo-pasos label{font-size:12px!important;font-weight:800!important;color:#d9edff!important}
#modalChatEmpresa #chatNuevoProyecto{width:100%!important;height:46px!important;border:1px solid #177bc6!important;border-radius:10px!important;background:#06182a!important;color:#fff!important;padding:0 12px!important}
#modalChatEmpresa .esm-chat-nuevo-usuarios{min-height:280px!important;max-height:440px!important;overflow:auto!important;display:flex!important;flex-direction:column!important;gap:8px!important;padding-right:4px!important}
#modalChatEmpresa .esm-chat-nuevo-persona{width:100%!important;display:grid!important;grid-template-columns:46px minmax(0,1fr) auto!important;align-items:center!important;gap:11px!important;padding:9px!important;border:1px solid #154d78!important;border-radius:11px!important;background:#06172a!important;color:#fff!important;text-align:left!important;cursor:pointer!important}
#modalChatEmpresa .esm-chat-nuevo-persona:hover{border-color:#1ca4ff!important;background:#09223d!important}
#modalChatEmpresa .esm-chat-nuevo-persona img,#modalChatEmpresa .esm-chat-nuevo-persona .esm-chat-iniciales{width:46px!important;height:46px!important;border-radius:9px!important;object-fit:cover!important;display:grid!important;place-items:center!important;background:#12518b!important;font-weight:900!important}
#modalChatEmpresa .esm-chat-nuevo-persona strong{display:block!important;font-size:13px!important}#modalChatEmpresa .esm-chat-nuevo-persona small{display:block!important;margin-top:3px!important;color:#9fb7cb!important;font-size:11px!important}
#modalChatEmpresa .esm-chat-nuevo-persona em{font-style:normal!important;font-size:10px!important;color:#55e394!important;white-space:nowrap!important}
@media(max-width:760px){#modalChatEmpresa .esm-chat-nuevo-pasos{grid-template-columns:1fr!important}#modalChatEmpresa .esm-chat-brandbar{grid-template-columns:42px minmax(0,1fr)!important}#modalChatEmpresa .esm-chat-nuevo-btn{grid-column:2!important;justify-self:start!important}}


/* ESM V70 — AJUSTES PUNTUALES CHAT EMPRESARIAL. SOLO #modalChatEmpresa. */
#modalChatEmpresa .esm-chat-brandbar{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  padding:0 4px!important;
}
#modalChatEmpresa .esm-chat-back{flex:0 0 42px!important}
#modalChatEmpresa .esm-chat-titulo-wrap{
  flex:0 1 auto!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}
#modalChatEmpresa .esm-chat-brandbar h2{font-size:22px!important;line-height:1.05!important}
#modalChatEmpresa .esm-chat-brandbar p{font-size:10px!important;margin-top:2px!important}
#modalChatEmpresa .esm-chat-nuevo-btn{
  width:34px!important;height:34px!important;min-width:34px!important;flex:0 0 34px!important;
  padding:0!important;margin-left:2px!important;display:grid!important;place-items:center!important;
  border-radius:9px!important;
}
#modalChatEmpresa .esm-chat-nuevo-btn svg{width:20px!important;height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important}
@media(max-width:760px){
  #modalChatEmpresa .esm-chat-brandbar{display:flex!important;grid-template-columns:none!important}
  #modalChatEmpresa .esm-chat-nuevo-btn{grid-column:auto!important;justify-self:auto!important}
}

/* ESM V71 — CORRECCIÓN DEFINITIVA ENCABEZADO E IDENTIDAD DEL CHAT. SOLO CHAT EMPRESARIAL. */
#modalChatEmpresa .esm-chat-brandbar{
  position:relative!important;
  display:grid!important;
  grid-template-columns:62px minmax(0,1fr) 38px!important;
  align-items:center!important;
  gap:14px!important;
  width:100%!important;
  min-width:0!important;
  padding:10px 14px!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}
#modalChatEmpresa .esm-chat-back{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  width:62px!important;
  height:62px!important;
  min-width:62px!important;
  max-width:62px!important;
  margin:0!important;
  grid-column:1!important;
  z-index:1!important;
}
#modalChatEmpresa .esm-chat-titulo-wrap{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  grid-column:2!important;
  min-width:0!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  align-self:center!important;
}
#modalChatEmpresa .esm-chat-brandbar .esm-chat-titulo-wrap h2{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  display:block!important;
  width:auto!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  font-size:27px!important;
  line-height:1.12!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#modalChatEmpresa .esm-chat-brandbar .esm-chat-titulo-wrap p{
  margin:5px 0 0!important;
  padding:0!important;
  font-size:13px!important;
  white-space:nowrap!important;
}
#modalChatEmpresa .esm-chat-nuevo-btn{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  grid-column:3!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  margin:0!important;
  padding:0!important;
  justify-self:end!important;
}
#modalChatEmpresa .esm-chat-avatar-usuario img,
#modalChatEmpresa .esm-chat-logo-empresa{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
@media(max-width:760px){
  #modalChatEmpresa .esm-chat-brandbar{grid-template-columns:52px minmax(0,1fr) 34px!important;gap:9px!important;padding:8px!important}
  #modalChatEmpresa .esm-chat-back{width:52px!important;height:52px!important;min-width:52px!important;max-width:52px!important}
  #modalChatEmpresa .esm-chat-brandbar .esm-chat-titulo-wrap h2{font-size:21px!important}
}

/* ESM V72 — COMPACTACIÓN DE IDENTIDAD Y FILTROS. ENCABEZADO BLOQUEADO, NO MODIFICAR. */
#modalChatEmpresa .esm-chat-identidad{
  min-height:52px!important;
  padding:4px 6px!important;
  gap:5px!important;
  border-radius:10px!important;
}
#modalChatEmpresa .esm-chat-empresa-card,
#modalChatEmpresa .esm-chat-usuario-card{
  min-height:40px!important;
  gap:5px!important;
}
#modalChatEmpresa .esm-chat-empresa-card{padding-right:5px!important}
#modalChatEmpresa .esm-chat-logo-empresa,
#modalChatEmpresa .esm-chat-avatar-usuario{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  flex:0 0 30px!important;
  border-radius:7px!important;
}
#modalChatEmpresa .esm-chat-identidad span{font-size:7.5px!important;line-height:1.05!important}
#modalChatEmpresa .esm-chat-identidad strong{font-size:10.5px!important;line-height:1.1!important}
#modalChatEmpresa .esm-chat-identidad small,
#modalChatEmpresa .esm-chat-identidad em{font-size:7.5px!important;line-height:1.08!important}
#modalChatEmpresa .esm-chat-fecha-hora{gap:6px!important;margin-top:6px!important}
#modalChatEmpresa .esm-chat-fecha-hora>div{height:34px!important;padding:0 9px!important;font-size:10px!important;border-radius:8px!important}
#modalChatEmpresa .esm-chat-search{height:38px!important;margin-top:6px!important;border-radius:8px!important}
#modalChatEmpresa .esm-chat-search input{font-size:10.5px!important}
#modalChatEmpresa .esm-chat-tabs{gap:6px!important;padding:7px 0!important}
#modalChatEmpresa .esm-chat-tabs button{
  height:34px!important;
  min-height:34px!important;
  padding:0 7px!important;
  border-radius:8px!important;
  font-size:10px!important;
}
#modalChatEmpresa .esm-chat-seccion-titulo{font-size:9px!important;margin:2px 0 5px!important}

/* ESM CHAT 73: solo acciones de llamada, sin mensaje fijado */
#modalChatEmpresa .esm-chat-main-actions.esm-chat-solo-llamadas {
  display: flex;
  align-items: center;
  gap: 10px;
}
#modalChatEmpresa .esm-chat-main-actions.esm-chat-solo-llamadas button {
  width: 48px;
  height: 48px;
  min-width: 48px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

/* ESM V75 — GRUPOS ELEGANTES, FOTOS DE PROYECTO Y CHAT GENERAL PROFESIONAL.
   Encabezado principal bloqueado: no se modifica flecha, título ni icono de nuevo chat. */
#modalChatEmpresa .esm-chat-proyectos-lista{
  border-color:#28445f!important;
  background:linear-gradient(180deg,rgba(4,15,29,.96),rgba(2,10,20,.98))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 24px rgba(0,0,0,.18)!important;
}
#modalChatEmpresa .esm-chat-proyecto{
  border-bottom:1px solid rgba(115,139,164,.22)!important;
  background:transparent!important;
}
#modalChatEmpresa .esm-chat-proyecto:last-child{border-bottom:0!important}
#modalChatEmpresa .esm-chat-proyecto-head{
  min-height:54px!important;
  height:auto!important;
  grid-template-columns:42px minmax(0,1fr) auto 20px!important;
  gap:9px!important;
  padding:6px 10px!important;
  background:linear-gradient(135deg,#10263a 0%,#0b1d2d 58%,#12283b 100%)!important;
  border-left:3px solid #c59a52!important;
  transition:background .2s ease,filter .2s ease!important;
}
#modalChatEmpresa .esm-chat-proyecto-head:hover{
  background:linear-gradient(135deg,#163149 0%,#10263a 58%,#18344b 100%)!important;
  filter:brightness(1.04)!important;
}
#modalChatEmpresa .esm-chat-proyecto.abierto .esm-chat-proyecto-head{
  background:linear-gradient(135deg,#18354c 0%,#10283c 60%,#1a3a50 100%)!important;
  box-shadow:inset 0 -1px 0 rgba(197,154,82,.28)!important;
}
#modalChatEmpresa .esm-chat-proyecto-head strong{
  color:#f2f5f7!important;
  font-size:13px!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
}
#modalChatEmpresa .esm-chat-proyecto-head small{
  color:#aebbc7!important;
  font-size:9px!important;
  white-space:nowrap!important;
}
#modalChatEmpresa .esm-chat-proyecto-head>b{
  color:#d5b06b!important;
  font-size:16px!important;
  transition:transform .2s ease!important;
}
#modalChatEmpresa .esm-chat-proyecto.abierto .esm-chat-proyecto-head>b{transform:rotate(180deg)!important}
#modalChatEmpresa .esm-chat-proyecto-foto{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  border-radius:9px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border:1px solid rgba(213,176,107,.82)!important;
  background:linear-gradient(145deg,#24384a,#101f2d)!important;
  box-shadow:0 0 0 2px rgba(197,154,82,.10),0 4px 10px rgba(0,0,0,.28)!important;
}
#modalChatEmpresa .esm-chat-proyecto-foto img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}
#modalChatEmpresa .esm-chat-proyecto-foto i{
  font-style:normal!important;
  color:#f0d6a4!important;
  font-size:15px!important;
  font-weight:900!important;
}
#modalChatEmpresa .esm-chat-miembros{
  background:linear-gradient(180deg,#071523,#06111d)!important;
  padding:3px 0!important;
}
#modalChatEmpresa .esm-chat-miembro{
  min-height:43px!important;
  grid-template-columns:31px minmax(0,1fr) auto 15px!important;
  gap:7px!important;
  padding:5px 9px 5px 18px!important;
  background:transparent!important;
  border-left:3px solid transparent!important;
}
#modalChatEmpresa .esm-chat-miembro:hover{
  background:rgba(255,255,255,.045)!important;
  border-left-color:#6b8499!important;
}
#modalChatEmpresa .esm-chat-miembro.activo{
  background:linear-gradient(90deg,rgba(197,154,82,.16),rgba(255,255,255,.025))!important;
  border-left-color:#d1a45a!important;
}
#modalChatEmpresa .esm-chat-miembro img,
#modalChatEmpresa .esm-chat-miembro .esm-chat-iniciales{
  width:29px!important;
  height:29px!important;
  border-radius:8px!important;
  border:1px solid rgba(157,176,194,.48)!important;
  background:#1b3042!important;
}
#modalChatEmpresa .esm-chat-miembro strong{font-size:11px!important;color:#edf1f4!important}
#modalChatEmpresa .esm-chat-miembro small{font-size:8.5px!important;color:#91a3b3!important}
#modalChatEmpresa .esm-chat-miembro em{font-size:8.5px!important;color:#58d68d!important}
#modalChatEmpresa .esm-chat-miembro>b{color:#8395a5!important;font-size:14px!important}

#modalChatEmpresa .esm-chat-canal-icon img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:inherit!important;
}
#modalChatEmpresa .esm-chat-canal-icon span{display:grid!important;place-items:center!important;width:100%!important;height:100%!important}
#modalChatEmpresa .esm-chat-bienvenida-general,
#modalChatEmpresa .esm-chat-bienvenida-privada{
  width:min(520px,82%)!important;
  margin:auto!important;
  padding:28px 30px!important;
  border:1px solid rgba(126,151,174,.35)!important;
  border-radius:18px!important;
  text-align:center!important;
  background:linear-gradient(145deg,rgba(15,37,55,.94),rgba(5,18,31,.96))!important;
  box-shadow:0 18px 48px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
#modalChatEmpresa .esm-chat-bienvenida-general>span,
#modalChatEmpresa .esm-chat-bienvenida-privada>span{
  width:58px!important;
  height:58px!important;
  margin:0 auto 14px!important;
  border:1px solid rgba(213,176,107,.72)!important;
  border-radius:15px!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(145deg,#243f55,#132839)!important;
  color:#f1d7a7!important;
  font-size:17px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
}
#modalChatEmpresa .esm-chat-bienvenida-general h4,
#modalChatEmpresa .esm-chat-bienvenida-privada h4{
  margin:0 0 8px!important;
  color:#f5f7f8!important;
  font-size:20px!important;
}
#modalChatEmpresa .esm-chat-bienvenida-general p,
#modalChatEmpresa .esm-chat-bienvenida-privada p{
  margin:0!important;
  color:#aebdca!important;
  font-size:12px!important;
  line-height:1.6!important;
}
#modalChatEmpresa .esm-chat-bienvenida-privada strong{color:#e3c58c!important}
#modalChatEmpresa .esm-chat-composer-bloqueado{
  opacity:.62!important;
  filter:saturate(.55)!important;
}
#modalChatEmpresa .esm-chat-composer-bloqueado textarea,
#modalChatEmpresa .esm-chat-composer-bloqueado button,
#modalChatEmpresa .esm-chat-composer-bloqueado label{cursor:not-allowed!important}
#modalChatEmpresa #btnEnviarChat:disabled,
#modalChatEmpresa .esm-chat-emoji:disabled{opacity:.45!important;box-shadow:none!important}

/* ESM Chat Empresarial: presentación institucional sin conversación seleccionada */
#modalChatEmpresa .esm-chat-bienvenida-general{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  min-height:245px!important;
  display:grid!important;
  place-items:center!important;
  width:min(560px,82%)!important;
  padding:34px!important;
  border:1px solid rgba(80,158,218,.46)!important;
  border-radius:20px!important;
  background:linear-gradient(145deg,rgba(7,25,43,.92),rgba(3,13,25,.96))!important;
  box-shadow:0 22px 55px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06),0 0 30px rgba(20,116,190,.10)!important;
}
#modalChatEmpresa .esm-chat-bienvenida-logo{
  position:absolute!important;
  z-index:-1!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:min(300px,62%)!important;
  height:min(190px,72%)!important;
  object-fit:contain!important;
  opacity:.075!important;
  filter:grayscale(.12) saturate(.75)!important;
  pointer-events:none!important;
  user-select:none!important;
}
#modalChatEmpresa .esm-chat-bienvenida-marca{
  position:absolute!important;
  z-index:-1!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  font-size:110px!important;
  font-weight:1000!important;
  letter-spacing:.12em!important;
  color:rgba(124,190,238,.055)!important;
  pointer-events:none!important;
}
#modalChatEmpresa .esm-chat-bienvenida-contenido{
  position:relative!important;
  z-index:2!important;
  max-width:430px!important;
  text-align:center!important;
}
#modalChatEmpresa .esm-chat-bienvenida-general .esm-chat-bienvenida-icono{
  width:54px!important;
  height:54px!important;
  margin:0 auto 15px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(79,170,235,.58)!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,rgba(19,66,101,.95),rgba(8,34,57,.95))!important;
  box-shadow:0 8px 24px rgba(0,0,0,.25),0 0 16px rgba(42,149,221,.16)!important;
  font-size:22px!important;
}
#modalChatEmpresa .esm-chat-bienvenida-general h4{
  margin:0 0 9px!important;
  color:#f4f8fb!important;
  font-size:21px!important;
  letter-spacing:.01em!important;
}
#modalChatEmpresa .esm-chat-bienvenida-general p{
  margin:0 auto!important;
  color:#aebfcd!important;
  font-size:12.5px!important;
  line-height:1.65!important;
}
#modalChatEmpresa .esm-chat-bienvenida-general small{
  display:inline-block!important;
  margin-top:16px!important;
  padding:5px 13px!important;
  border:1px solid rgba(92,151,194,.32)!important;
  border-radius:999px!important;
  background:rgba(6,25,42,.68)!important;
  color:#78bce9!important;
  font-size:9px!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}

/* ESM CHAT 78: filtros funcionales Todos / No leídos / Favoritos */
#modalChatEmpresa .esm-chat-conversacion{position:relative;display:flex;align-items:stretch;margin:0 0 7px;border:1px solid rgba(71,112,139,.42);border-radius:12px;background:linear-gradient(135deg,rgba(9,25,38,.96),rgba(15,34,46,.88));overflow:hidden;transition:.18s ease}
#modalChatEmpresa .esm-chat-conversacion:hover,#modalChatEmpresa .esm-chat-conversacion.activo{border-color:rgba(211,168,84,.8);box-shadow:0 0 18px rgba(211,168,84,.12);transform:translateY(-1px)}
#modalChatEmpresa .esm-chat-conversacion-abrir{min-width:0;flex:1;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 39px 9px 9px;border:0;background:transparent;color:#eef8fb;text-align:left;cursor:pointer}
#modalChatEmpresa .esm-chat-conversacion-abrir>img,#modalChatEmpresa .esm-chat-conversacion-abrir>.esm-chat-iniciales{width:42px;height:42px;border-radius:10px;object-fit:cover;border:1px solid rgba(211,168,84,.65);background:#112a39;display:grid;place-items:center;font-size:11px;font-weight:800}
#modalChatEmpresa .esm-chat-conversacion-texto{min-width:0;display:flex;flex-direction:column;gap:2px}
#modalChatEmpresa .esm-chat-conversacion-texto strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#modalChatEmpresa .esm-chat-conversacion-texto small{font-size:10px;color:#a8bcc7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#modalChatEmpresa .esm-chat-conversacion-texto em{font-size:8.5px;color:#748f9e;font-style:normal}
#modalChatEmpresa .esm-chat-conversacion-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;color:#8199a6;font-size:8px}
#modalChatEmpresa .esm-chat-conversacion-meta b{display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:10px;background:#13b982;color:#fff;font-size:9px}
#modalChatEmpresa .esm-chat-favorito{position:absolute;right:7px;bottom:7px;width:25px;height:25px;border:0;background:transparent;color:#526b78;font-size:17px;cursor:pointer;transition:.15s}
#modalChatEmpresa .esm-chat-favorito:hover,#modalChatEmpresa .esm-chat-favorito.activo{color:#e3b553;text-shadow:0 0 10px rgba(227,181,83,.55)}
#modalChatEmpresa .esm-chat-lista-vacia{min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;color:#8da5b2;border:1px dashed rgba(86,126,148,.35);border-radius:14px;background:rgba(7,20,30,.48)}
#modalChatEmpresa .esm-chat-lista-vacia span{font-size:28px;color:#d6aa56;margin-bottom:8px}
#modalChatEmpresa .esm-chat-lista-vacia strong{font-size:12px;color:#e8f2f5;margin-bottom:5px}
#modalChatEmpresa .esm-chat-lista-vacia small{font-size:9px;line-height:1.5;max-width:250px}

/* ESM 81 - corrección estable del área de mensajes: iniciar siempre arriba */
#modalChatEmpresa .esm-chat-messages,
#modalChatEmpresa .chat-mensajes-pro {
  justify-content: flex-start !important;
  align-content: flex-start !important;
}
#modalChatEmpresa .chat-msg:first-child {
  margin-top: 0 !important;
}

/* ESM 82 - mensajes con avatar, adjuntos y audio sin alterar el layout aprobado */
#modalChatEmpresa .chat-propio .chat-msg-avatar{display:grid!important}
#modalChatEmpresa .esm-chat-composer{grid-template-columns:58px 58px 1fr 72px!important}
#modalChatEmpresa .esm-chat-audio{height:58px!important;border:1px solid #0878e8!important;border-radius:12px!important;background:#03152b!important;color:#fff!important;font-size:24px!important;display:grid!important;place-items:center!important;cursor:pointer!important}
#modalChatEmpresa .esm-chat-audio.grabando{background:#7a1420!important;border-color:#ff5566!important;box-shadow:0 0 18px rgba(255,55,75,.5)!important;animation:esmChatPulsoAudio 1s infinite}
@keyframes esmChatPulsoAudio{50%{transform:scale(.94);opacity:.8}}
#modalChatEmpresa .chat-audio-player{display:block!important;width:min(280px,100%)!important;margin-top:7px!important;height:38px!important}
#modalChatEmpresa .chat-documento{display:flex!important;align-items:center!important;gap:10px!important;margin-top:7px!important;padding:9px 11px!important;border:1px solid rgba(116,193,242,.35)!important;border-radius:10px!important;background:rgba(0,0,0,.18)!important;color:#fff!important;text-decoration:none!important}
#modalChatEmpresa .chat-documento>span{font-size:24px!important}
#modalChatEmpresa .chat-documento div{display:flex!important;flex-direction:column!important;min-width:0!important}
#modalChatEmpresa .chat-documento strong{font-size:11px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#modalChatEmpresa .chat-documento small{font-size:8px!important;color:#9fb8c9!important}
#modalChatEmpresa .chat-entrega{display:block!important;text-align:right!important;margin-top:4px!important;font-size:11px!important;color:#9db3c1!important}
#modalChatEmpresa .chat-entrega-leido{color:#4ab8ff!important}


/* ESM CHAT 83 - funciones avanzadas encapsuladas */
#modalChatEmpresa .esm-chat-toolsbar{display:flex;gap:7px;padding:6px 14px;background:rgba(4,18,29,.78);border-bottom:1px solid rgba(112,190,230,.13)}
#modalChatEmpresa .esm-chat-toolsbar button{border:1px solid rgba(112,190,230,.22);background:rgba(13,38,55,.75);color:#d8edf8;border-radius:9px;padding:5px 9px;font-size:11px;cursor:pointer}
#modalChatEmpresa .esm-chat-toolsbar button.activo{border-color:#e6ba55;color:#ffe49b;background:rgba(143,99,18,.24)}
#modalChatEmpresa .esm-chat-typing{padding:5px 18px;font-size:12px;color:#74d9ff;background:rgba(4,23,35,.8);font-style:italic}
#modalChatEmpresa .esm-chat-search-messages{display:flex;align-items:center;gap:8px;padding:8px 14px;background:rgba(6,24,36,.96);border-bottom:1px solid rgba(117,197,235,.18)}
#modalChatEmpresa .esm-chat-search-messages input{flex:1;background:#0b2535;border:1px solid #28546b;color:#fff;border-radius:9px;padding:8px 11px}
#modalChatEmpresa .esm-chat-reply-preview{display:flex;justify-content:space-between;align-items:center;padding:7px 14px;background:rgba(18,48,64,.96);border-left:3px solid #55c9f6;color:#dceef7}
#modalChatEmpresa .esm-chat-reply-preview p{margin:2px 0 0;max-width:560px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
#modalChatEmpresa .esm-chat-date-separator{text-align:center;margin:12px 0 8px;position:relative;z-index:2}
#modalChatEmpresa .esm-chat-date-separator span{display:inline-block;padding:4px 12px;border-radius:14px;background:rgba(8,28,40,.86);border:1px solid rgba(132,201,233,.2);font-size:11px;color:#cbe9f7}
#modalChatEmpresa .esm-chat-message-actions{display:flex;gap:4px;justify-content:flex-end;opacity:0;transition:.18s;margin-top:4px}
#modalChatEmpresa .chat-burbuja:hover .esm-chat-message-actions{opacity:1}
#modalChatEmpresa .esm-chat-message-actions button,#modalChatEmpresa .esm-chat-reactions button{border:0;background:rgba(8,27,39,.55);color:#d8ecf7;border-radius:7px;padding:3px 5px;cursor:pointer;font-size:11px}
#modalChatEmpresa .esm-chat-reactions{display:none;gap:4px;flex-wrap:wrap;margin-top:5px}.esm-chat-reactions.visible{display:flex!important}
#modalChatEmpresa .esm-chat-reactions button.activo{background:rgba(34,119,160,.55);outline:1px solid #53c8f6}
#modalChatEmpresa .esm-chat-quoted{border-left:3px solid #55c9f6;background:rgba(3,20,30,.34);padding:5px 8px;border-radius:7px;margin-bottom:6px;display:flex;flex-direction:column;font-size:11px}
#modalChatEmpresa .esm-chat-editado{opacity:.65;font-size:9px;margin-right:5px}
#modalChatEmpresa .chat-mensajes-pro{justify-content:flex-start!important;align-content:flex-start!important;padding-top:12px!important}
#modalChatEmpresa .oculto{display:none!important}


/* ESM CHAT 88 — acabado corporativo, mensajes arriba y marca de agua */
#modalChatEmpresa .esm-chat-toolsbar,
#modalChatEmpresa .esm-chat-search-messages{display:none!important}
#modalChatEmpresa .esm-chat-main{grid-template-rows:72px 22px 26px minmax(0,1fr) 72px!important}
#modalChatEmpresa .esm-chat-messages{
  position:relative!important;
  justify-content:flex-start!important;
  align-content:flex-start!important;
  padding:20px 24px 28px!important;
  background-color:#03101e!important;
  background-image:
    linear-gradient(rgba(3,16,30,.91),rgba(3,16,30,.91)),
    var(--esm-chat-watermark,none),
    radial-gradient(rgba(27,113,174,.10) 1px,transparent 1px)!important;
  background-repeat:no-repeat,no-repeat,repeat!important;
  background-position:center,center,0 0!important;
  background-size:cover,clamp(220px,34%,430px) auto,20px 20px!important;
}
#modalChatEmpresa .esm-chat-messages>*{position:relative;z-index:1}
#modalChatEmpresa .esm-chat-date-separator{margin:2px auto 10px!important}
#modalChatEmpresa .chat-burbuja{
  background:linear-gradient(145deg,#10263b,#0a1d30)!important;
  border-color:#24516e!important;
  box-shadow:0 8px 22px rgba(0,0,0,.25)!important;
}
#modalChatEmpresa .chat-propio .chat-burbuja{
  background:linear-gradient(145deg,#075f3b,#064b31)!important;
  border-color:#168d61!important;
}
#modalChatEmpresa .esm-chat-conversacion-item,
#modalChatEmpresa .esm-chat-resumen-item{
  background:linear-gradient(135deg,#0b2137,#0a192b)!important;
  border:1px solid #1d567b!important;
  box-shadow:0 6px 18px rgba(0,0,0,.22)!important;
}
#modalChatEmpresa .esm-chat-conversacion-item:hover,
#modalChatEmpresa .esm-chat-resumen-item:hover{
  background:linear-gradient(135deg,#12314d,#0c243a)!important;
  border-color:#2c83af!important;
}
#modalChatEmpresa .esm-chat-tabs button{background:#0a1a2b!important;border-color:#23506d!important;color:#c8d9e6!important}
#modalChatEmpresa .esm-chat-tabs button.activo{background:linear-gradient(180deg,#17456b,#10334f)!important;border-color:#35bce7!important;color:#fff!important;box-shadow:0 0 12px rgba(53,188,231,.2)!important}
#modalChatEmpresa .chat-entrega{margin-left:7px!important;font-weight:900!important;color:#9ab5c8!important}
#modalChatEmpresa .chat-entrega-leido{color:#2fc8ff!important}
#modalChatEmpresa .chat-entrega-recibido{color:#8edcff!important}

/* ESM CHAT 89 — corrección efectiva con selectores reales y prioridad final */
#modalChatEmpresa .esm-chat-toolsbar,
#modalChatEmpresa .esm-chat-search-messages,
#modalChatEmpresa #panelBuscarMensajesChat,
#modalChatEmpresa #btnChatBuscarMensajes,
#modalChatEmpresa #btnChatFijarConversacion { display:none!important; }

#modalChatEmpresa .esm-chat-main {
  display:grid!important;
  grid-template-rows:auto auto auto auto minmax(0,1fr) auto!important;
  min-height:0!important;
}
#modalChatEmpresa .esm-chat-messages,
#modalChatEmpresa .chat-mensajes-pro {
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  align-content:flex-start!important;
  gap:12px!important;
  min-height:0!important;
  height:100%!important;
  overflow-y:auto!important;
  padding:16px 22px 26px!important;
  background-color:#020d19!important;
  background-image:
    linear-gradient(rgba(2,13,25,.90),rgba(2,13,25,.90)),
    var(--esm-chat-watermark,none),
    radial-gradient(rgba(35,132,190,.09) 1px,transparent 1px)!important;
  background-repeat:no-repeat,no-repeat,repeat!important;
  background-position:center,center,0 0!important;
  background-size:cover,clamp(220px,32vw,430px) auto,20px 20px!important;
}
#modalChatEmpresa .esm-chat-messages > *,
#modalChatEmpresa .chat-mensajes-pro > * { flex:0 0 auto!important; position:relative; z-index:1; }
#modalChatEmpresa .esm-chat-date-separator { margin:0 auto 4px!important; }

#modalChatEmpresa .esm-chat-conversacion {
  background:linear-gradient(135deg,#0b2034,#071525)!important;
  border:1px solid #1b4b69!important;
  border-radius:14px!important;
  box-shadow:0 6px 18px rgba(0,0,0,.25)!important;
  overflow:hidden!important;
}
#modalChatEmpresa .esm-chat-conversacion:hover,
#modalChatEmpresa .esm-chat-conversacion.activo {
  background:linear-gradient(135deg,#12304a,#0b2238)!important;
  border-color:#2ea6d5!important;
  box-shadow:0 0 0 1px rgba(46,166,213,.16),0 9px 24px rgba(0,0,0,.28)!important;
}
#modalChatEmpresa .esm-chat-conversacion-abrir { background:transparent!important; }
#modalChatEmpresa .esm-chat-conversacion-texto strong { color:#f2f8fc!important; }
#modalChatEmpresa .esm-chat-conversacion-texto small,
#modalChatEmpresa .esm-chat-conversacion-texto em,
#modalChatEmpresa .esm-chat-conversacion-meta time { color:#9eb6c8!important; }

#modalChatEmpresa .chat-burbuja {
  background:linear-gradient(145deg,#10263a,#091a2b)!important;
  border:1px solid #244d69!important;
  box-shadow:0 8px 22px rgba(0,0,0,.28)!important;
  color:#f6fbff!important;
}
#modalChatEmpresa .chat-propio .chat-burbuja {
  background:linear-gradient(145deg,#075d3b,#05472f)!important;
  border-color:#15855d!important;
}
#modalChatEmpresa .chat-entrega { color:#9eb7c8!important; font-weight:900!important; }
#modalChatEmpresa .chat-entrega-recibido { color:#75cdf1!important; }
#modalChatEmpresa .chat-entrega-leido { color:#20c7ff!important; }

#modalChatEmpresa .esm-chat-tabs button {
  background:#081827!important;
  border-color:#214a64!important;
  color:#c2d3df!important;
}
#modalChatEmpresa .esm-chat-tabs button.activo {
  background:linear-gradient(180deg,#154365,#0e304b)!important;
  border-color:#31b8e5!important;
  color:#fff!important;
  box-shadow:0 0 13px rgba(49,184,229,.18)!important;
}

/* ESM CHAT 90 — barra de escritura anclada al borde inferior real */
#modalChatEmpresa .esm-chat-main{
  position:relative!important;
  grid-template-rows:auto auto auto auto minmax(0,1fr) 64px!important;
}
#modalChatEmpresa .chat-composer-pro.esm-chat-composer,
#modalChatEmpresa .chat-composer-wa-real{
  grid-row:6!important;
  align-self:end!important;
  margin:3px 9px 5px!important;
  position:relative!important;
  bottom:auto!important;
}