:root {
  --bg: #071522;
  --panel: #0d2236;
  --panel-2: #122b43;
  --line: rgba(255,255,255,.09);
  --text: #f7fbff;
  --muted: #9eb1c2;
  --accent: #18b6ff;
  --accent-2: #74d7ff;
  --success: #3ddc97;
  --warning: #ffcc66;
  --danger: #ff6b6b;
  --radius: 22px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: radial-gradient(circle at top right,#123451 0,var(--bg) 42%); color: var(--text); min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button,input { font: inherit; }
.shell { width: min(100%, 980px); margin: 0 auto; padding: 24px 18px 110px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size: clamp(1.65rem,5vw,2.3rem); margin-bottom:4px; }
h2 { font-size:1.55rem; margin-bottom:8px; }
h3 { margin:0 0 7px; font-size:1.08rem; }
.brand-name { letter-spacing:.16em; font-weight:800; font-size:.85rem; color:var(--accent-2); }
.brand-name.small { font-size:.73rem; margin-bottom:6px; }
.brand-mark { width:78px; height:78px; border-radius:24px; display:grid; place-items:center; font-size:1.8rem; font-weight:900; margin:0 auto 14px; background:linear-gradient(145deg,var(--accent),#0878ff); box-shadow:0 18px 45px rgba(0,150,255,.25); }
.auth-card { max-width:430px; margin:8vh auto 0; background:rgba(13,34,54,.92); border:1px solid var(--line); border-radius:28px; padding:28px; text-align:center; box-shadow:0 25px 80px rgba(0,0,0,.28); }
.auth-card .brand-name { margin-bottom:28px; }
.stack { display:grid; gap:10px; text-align:left; }
label { font-size:.9rem; color:#dce8f2; }
input { width:100%; border:1px solid var(--line); background:#081827; color:var(--text); border-radius:14px; padding:14px 15px; outline:none; }
input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(24,182,255,.12); }
.muted, small { color:var(--muted); }
.pilot-note { margin:18px 0 8px; color:var(--muted); font-size:.86rem; }
.text-link { color:var(--accent-2); }
.hero { border:1px solid var(--line); background:linear-gradient(135deg,rgba(24,182,255,.12),rgba(255,255,255,.025)); border-radius:var(--radius); padding:22px; display:flex; justify-content:space-between; gap:18px; align-items:center; margin-bottom:18px; }
.hero p { margin:0; color:var(--muted); max-width:600px; }
.eyebrow { display:inline-block; color:var(--accent-2); font-size:.72rem; letter-spacing:.12em; font-weight:800; margin-bottom:9px; }
.service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.service-card { background:rgba(13,34,54,.95); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:0 14px 42px rgba(0,0,0,.13); }
.service-head { display:flex; gap:13px; align-items:center; margin-bottom:20px; }
.service-icon { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; background:var(--panel-2); font-size:1.35rem; }
.grow { flex:1; }
.status { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:750; padding:5px 9px; border-radius:999px; }
.status.active { color:#bff6df; background:rgba(61,220,151,.12); }
.status.warning { color:#ffe0a0; background:rgba(255,204,102,.12); }
.status.expired { color:#ffc0c0; background:rgba(255,107,107,.12); }
.status.inactive { color:#cbd5de; background:rgba(255,255,255,.08); }
.service-meta { display:flex; justify-content:space-between; gap:12px; padding:13px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:16px; }
.service-meta span { color:var(--muted); }
.switch-row { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:13px; }
.switch-row small { display:block; margin-top:3px; }
.switch { position:relative; width:48px; height:28px; flex:0 0 auto; }
.switch input { display:none; }
.switch span { position:absolute; inset:0; border-radius:999px; background:#31485b; transition:.2s; }
.switch span:after { content:""; position:absolute; width:22px; height:22px; border-radius:50%; background:white; top:3px; left:3px; transition:.2s; }
.switch input:checked + span { background:var(--accent); }
.switch input:checked + span:after { transform:translateX(20px); }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.chip input { display:none; }
.chip span { display:block; cursor:pointer; padding:8px 10px; border-radius:11px; background:#0a1b2a; border:1px solid var(--line); color:var(--muted); font-size:.8rem; }
.chip input:checked + span { border-color:rgba(24,182,255,.55); color:#e8f8ff; background:rgba(24,182,255,.12); }
.prefs-form { margin-bottom:12px; }
.btn { border:none; border-radius:14px; padding:12px 15px; cursor:pointer; font-weight:750; display:inline-flex; justify-content:center; align-items:center; gap:8px; }
.btn.primary { background:linear-gradient(135deg,var(--accent),#0878ff); color:white; }
.btn.secondary { background:#e7f7ff; color:#062238; }
.btn.ghost { background:#102b43; color:#dff5ff; border:1px solid var(--line); }
.btn.danger { background:rgba(255,107,107,.12); color:#ffd2d2; border:1px solid rgba(255,107,107,.22); }
.btn.full { width:100%; }
.btn.compact { padding:9px 12px; }
.icon-btn { width:42px; height:42px; border-radius:14px; background:var(--panel); border:1px solid var(--line); display:grid; place-items:center; }
.hidden { display:none !important; }
.flash-stack { display:grid; gap:8px; margin-bottom:14px; }
.flash { padding:11px 13px; border-radius:13px; border:1px solid var(--line); background:var(--panel); }
.flash.success { border-color:rgba(61,220,151,.3); }
.flash.error { border-color:rgba(255,107,107,.35); }
.bottom-nav { position:fixed; left:50%; transform:translateX(-50%); bottom:max(12px,env(safe-area-inset-bottom)); width:min(calc(100% - 24px),620px); display:grid; grid-template-columns:repeat(4,1fr); padding:9px; background:rgba(8,24,39,.95); border:1px solid var(--line); border-radius:22px; backdrop-filter:blur(18px); box-shadow:0 15px 45px rgba(0,0,0,.35); }
.bottom-nav a { display:grid; place-items:center; gap:2px; padding:7px; color:var(--muted); font-size:1.05rem; }
.bottom-nav span { font-size:.7rem; }
.bottom-nav .active { color:var(--accent-2); }
.admin-panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.new-customer { display:grid; grid-template-columns:1fr auto; gap:10px; margin-bottom:18px; }
.customer-list { display:grid; gap:8px; }
.customer-row { display:flex; justify-content:space-between; align-items:center; padding:15px; border-radius:15px; background:#091a29; border:1px solid var(--line); }
.customer-row small { display:block; margin-top:4px; }
.admin-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.date-action { grid-column:1/-1; display:grid; grid-template-columns:1fr auto; gap:8px; }
.admin-actions .danger,.admin-actions .primary { grid-column:1/-1; }
@media (max-width:720px) {
  .shell { padding-top:18px; }
  .service-grid { grid-template-columns:1fr; }
  .hero { align-items:flex-start; flex-direction:column; }
  .hero .btn { width:100%; }
  .new-customer { grid-template-columns:1fr; }
  .admin-actions { grid-template-columns:1fr 1fr; }
  .admin-actions .btn:nth-child(3) { grid-column:1/-1; }
}
.push-card { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; background:linear-gradient(135deg,rgba(116,215,255,.12),rgba(13,34,54,.96)); border:1px solid rgba(116,215,255,.18); border-radius:var(--radius); padding:20px; margin-bottom:18px; }
.push-card h2 { margin-bottom:6px; }
.push-card p { margin-bottom:0; }
.push-actions { display:grid; gap:8px; min-width:210px; }
.push-status { color:var(--muted); font-size:.78rem; text-align:center; }
.install-hint { grid-column:1/-1; padding:11px 13px; border-radius:12px; background:rgba(255,204,102,.09); border:1px solid rgba(255,204,102,.18); color:#ffe5ae; font-size:.84rem; }
.admin-run { margin-bottom:16px; }
.customer-push-panel { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; }
.customer-push-panel p { margin:5px 0 0; }
.notification-log { margin-top:16px; }
.log-row { padding:12px 0; border-top:1px solid var(--line); }
.log-row small { display:block; margin-top:4px; }
@media (max-width:720px) {
  .push-card { grid-template-columns:1fr; }
  .push-actions { min-width:0; }
  .customer-push-panel { align-items:stretch; flex-direction:column; }
  .customer-push-panel .btn { width:100%; }
}

/* =========================================================
   JR-TELECOM CUSTOMER PWA - MOBILE POLISH v0.1.1
   ========================================================= */

html {
  scroll-behavior: smooth;
  scroll-padding-bottom: 150px;
}

.shell {
  padding-bottom: 175px;
}

.profile-btn {
  flex: 0 0 auto;
  font-size: 1.05rem;
}

.service-card,
.push-card,
.hero,
.settings-card {
  scroll-margin-top: 16px;
}

.service-card {
  padding: 17px;
}

.service-head {
  margin-bottom: 14px;
}

.service-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.service-meta {
  padding: 11px 0;
  margin-bottom: 13px;
}

.switch-row {
  margin-bottom: 10px;
}

.chips {
  gap: 7px;
  margin-bottom: 10px;
}

.chip span {
  padding: 7px 9px;
}

.prefs-form {
  margin-bottom: 10px;
}

.push-status {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
}

.push-status::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(255,107,107,.10);
}

.push-status.on::before {
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(61,220,151,.10);
}

.push-status.warn::before {
  background: var(--warning);
  box-shadow: 0 0 0 3px rgba(255,204,102,.10);
}

.settings-card {
  background: rgba(13,34,54,.95);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-top: 16px;
}

.settings-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
}

.settings-head h2,
.settings-head p {
  margin-bottom: 0;
}

.settings-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--panel-2);
  font-size: 1.2rem;
}

.settings-info {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.settings-info span {
  color: var(--muted);
}

.logout-btn {
  margin-top: 12px;
}

.bottom-nav {
  z-index: 100;
}

@media (max-width:720px) {
  .shell {
    padding: 16px 16px 180px;
  }

  .topbar {
    margin-bottom: 17px;
  }

  .hero {
    padding: 19px;
    margin-bottom: 14px;
  }

  .push-card {
    padding: 17px;
    margin-bottom: 14px;
  }

  .service-grid {
    gap: 13px;
  }

  .service-card {
    padding: 16px;
  }

  .bottom-nav {
    width: calc(100% - 30px);
    padding: 8px;
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .bottom-nav a {
    padding: 6px 4px;
  }
}

/* =========================================================
   JR-TELECOM CUSTOMER PWA
   MOBILE POLISH v0.1.2
   ========================================================= */

:root {
  --jr-dock-height: 82px;
  --jr-dock-clearance: 135px;
}

/*
 * Reserva espacio real debajo del contenido.
 * Ningún selector/botón debe quedar atrapado detrás del dock.
 */
.shell {
  padding-bottom:
    calc(
      var(--jr-dock-height) +
      var(--jr-dock-clearance) +
      env(safe-area-inset-bottom)
    );
}

.service-card,
.push-card,
.hero,
.settings-card,
#notifications,
#settings {
  scroll-margin-bottom:
    calc(
      var(--jr-dock-height) +
      45px +
      env(safe-area-inset-bottom)
    );
}

/* Dock inferior */
.bottom-nav {
  min-height: var(--jr-dock-height);
  bottom: max(10px, env(safe-area-inset-bottom));
  padding: 8px 10px;
  overflow: hidden;
}

.bottom-nav a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  min-width: 0;
  min-height: 62px;

  gap: 5px;
  padding: 5px 3px;

  font-size: inherit;
  border-radius: 15px;

  transition:
    color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.bottom-nav a:active {
  transform: scale(.96);
}

.bottom-nav .active {
  background: rgba(24,182,255,.07);
}

/* SVG uniformes */
.nav-icon,
.profile-icon {
  width: 23px;
  height: 23px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;

  flex: 0 0 auto;
}

.bottom-nav .nav-icon {
  color: currentColor;
}

.bottom-nav span {
  line-height: 1;
  font-size: .69rem;
}

.profile-icon {
  width: 21px;
  height: 21px;
  color: var(--muted);
}

.profile-btn:active .profile-icon {
  color: var(--accent-2);
}

/* Más separación al final de Ajustes */
.settings-card {
  margin-bottom: 20px;
}

/* Área táctil ligeramente más cómoda */
.chip span {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width:720px) {

  .shell {
    padding-left: 16px;
    padding-right: 16px;

    padding-bottom:
      calc(
        225px +
        env(safe-area-inset-bottom)
      );
  }

  .bottom-nav {
    width: calc(100% - 28px);
    max-width: 620px;

    border-radius: 22px;

    bottom:
      max(
        10px,
        env(safe-area-inset-bottom)
      );
  }

  .bottom-nav a {
    min-height: 60px;
  }

  .nav-icon {
    width: 22px;
    height: 22px;
  }
}

/*
 * Dispositivos con pantalla baja:
 * dock ligeramente más compacto.
 */
@media (max-height:700px) and (max-width:720px) {

  :root {
    --jr-dock-height: 74px;
  }

  .bottom-nav a {
    min-height: 54px;
  }

  .bottom-nav {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}


/* =========================================================
   JR-TELECOM PWA - ADMIN SIMPLE v0.3
   ========================================================= */

.admin-topbar .eyebrow {
  display: block;
  margin-top: 6px;
}

.admin-auto-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.admin-auto-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.4;
}

.admin-auto-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(61,220,151,.12);
  font-weight: 900;
  font-size: 1.15rem;
}

.admin-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.admin-section-head h2 {
  margin: 2px 0 0;
}

.customer-row-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.mini-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: .72rem;
  border: 1px solid var(--line);
}

.mini-status.success {
  color: #bff6df;
  background: rgba(61,220,151,.10);
}

.mini-status.muted {
  color: var(--muted);
  background: rgba(255,255,255,.04);
}

.customer-chevron {
  font-size: 1.7rem;
  color: var(--muted);
}

.empty-state {
  padding: 24px 12px;
  text-align: center;
  color: var(--muted);
}


.admin-customer-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.admin-summary-item {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.admin-summary-item span {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  margin-bottom: 5px;
}

.summary-good {
  color: #bff6df;
}

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


.admin-service-card {
  display: flex;
  flex-direction: column;
}

.admin-expiry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.admin-expiry span {
  color: var(--muted);
}

.admin-expiry strong {
  text-align: right;
}


.admin-reminder-summary {
  padding: 13px 0;
}

.admin-reminder-label {
  display: block;
  color: var(--muted);
  font-size: .79rem;
  margin-bottom: 9px;
}

.reminder-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reminder-pill {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(48,181,255,.10);
  border: 1px solid var(--line);
  font-size: .74rem;
  font-weight: 700;
}

.reminder-pill.off {
  color: var(--muted);
  background: rgba(255,255,255,.04);
}


.admin-actions-v03 {
  margin-top: auto;
}

.admin-renew-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.admin-more {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.admin-more summary {
  cursor: pointer;
  color: var(--muted);
  text-align: center;
  font-size: .82rem;
  padding: 5px;
  user-select: none;
}

.admin-more-content {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.admin-date-label {
  color: var(--muted);
  font-size: .78rem;
}

.date-action-v03 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.date-action-v03 input {
  min-width: 0;
}


@media (max-width:720px) {

  .admin-customer-summary {
    grid-template-columns: 1fr;
  }

  .admin-renew-actions {
    grid-template-columns: 1fr 1fr;
  }

  .date-action-v03 {
    grid-template-columns: 1fr;
  }

  .date-action-v03 .btn {
    width: 100%;
  }

}


/* =========================================================
   JR-TELECOM PWA - ALTA RAPIDA v0.4
   ========================================================= */

.quick-create-panel {
  margin-bottom: 16px;
}

.quick-create {
  border: 0;
}

.quick-create > summary {
  list-style: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 4px 2px;

  font-weight: 800;
}

.quick-create > summary::-webkit-details-marker {
  display: none;
}

.quick-create > summary span {
  color: var(--accent);
  font-size: 1.05rem;
}

.quick-create > summary small {
  color: var(--muted);
  font-weight: 600;
}

.quick-create[open] > summary {
  margin-bottom: 18px;
}

.quick-create-form {
  display: grid;
  gap: 17px;
}

.quick-field {
  display: grid;
  gap: 7px;
}

.quick-field label {
  color: var(--muted);
  font-size: .8rem;
}

.quick-services-title {
  display: grid;
  gap: 3px;
}

.quick-service-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quick-service-option {
  display: grid;
  gap: 13px;

  padding: 14px;

  border-radius: 16px;
  border: 1px solid var(--line);

  background: rgba(7,25,40,.65);

  transition:
    border-color .15s ease,
    background .15s ease,
    transform .15s ease;
}

.quick-service-option.selected {
  border-color: rgba(48,181,255,.75);
  background: rgba(48,181,255,.08);
}

.quick-service-check {
  display: flex;
  align-items: center;
  gap: 9px;
}

.quick-service-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.quick-check-box {
  width: 20px;
  height: 20px;

  flex: 0 0 20px;

  display: grid;
  place-items: center;

  border-radius: 6px;
  border: 1px solid var(--line);

  background: #081a29;
}

.quick-service-option.selected
.quick-check-box {

  border-color: var(--accent);
  background: var(--accent);

}

.quick-service-option.selected
.quick-check-box::after {

  content: "✓";

  color: white;
  font-size: .76rem;
  font-weight: 900;

}

.quick-service-icon {
  font-size: 1.15rem;
}

.quick-service-date {
  display: grid;
  gap: 6px;
}

.quick-service-date span {
  color: var(--muted);
  font-size: .75rem;
}

.quick-service-date input {
  width: 100%;
}

.quick-default-alerts {
  display: grid;
  gap: 4px;

  padding: 13px 14px;

  border: 1px solid var(--line);
  border-radius: 14px;

  background: rgba(48,181,255,.05);
}

.quick-default-alerts span,
.quick-default-alerts small {
  color: var(--muted);
}

.quick-default-alerts small {
  font-size: .76rem;
}

.quick-create-submit {
  min-height: 48px;
}

.activation-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
}

.copy-code-btn {
  border: 1px solid var(--line);

  background: rgba(48,181,255,.08);
  color: var(--accent);

  border-radius: 10px;

  padding: 7px 10px;

  font-size: .76rem;
  font-weight: 800;

  cursor: pointer;
}


@media (max-width:720px) {

  .quick-service-grid {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   JR-TELECOM PWA - DELETE CUSTOMER v0.5
   ========================================================= */

.danger-zone {
  margin-top: 18px;
  padding: 14px 18px;

  border: 1px solid rgba(255,107,107,.20);
  border-radius: var(--radius);

  background: rgba(255,107,107,.035);
}

.danger-zone > details > summary {
  cursor: pointer;
  list-style: none;

  text-align: center;

  color: #ffc4c4;
  font-size: .82rem;
  font-weight: 750;
}

.danger-zone > details > summary::-webkit-details-marker {
  display: none;
}

.danger-zone-content {
  display: grid;
  gap: 11px;

  margin-top: 15px;
  padding-top: 15px;

  border-top: 1px solid rgba(255,107,107,.18);
}

.danger-zone-content p {
  margin: 0;

  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
}

.danger-zone-content .danger-warning {
  color: #ffc0c0;
  font-weight: 750;
}

.danger-zone-content form {
  display: grid;
  gap: 9px;
}

.danger-zone-content label {
  color: var(--muted);
  font-size: .78rem;
}

.danger-zone-content input {
  width: 100%;
}



/* =========================================================
   JR-TELECOM CUSTOMER APP - BRANDING v0.6
   ========================================================= */

.brand-logo-mark {
  width: 108px !important;
  height: 108px !important;

  margin:
    0 auto
    10px !important;

  padding: 0 !important;

  display: grid !important;
  place-items: center !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;
}

.brand-logo-main {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}

.admin-logo-mark {
  width: 82px !important;
  height: 82px !important;
}

.auth-card .brand-name {
  margin-top: 2px;

  font-size: 1.03rem;

  letter-spacing: .045em;
}

.client-brand {
  display: flex;
  align-items: center;

  gap: 9px;

  min-height: 42px;
}

.client-brand-logo {
  display: block;

  width: 39px;
  height: 39px;

  flex: 0 0 39px;

  object-fit: contain;
}

.client-brand .brand-name {
  margin: 0;

  line-height: 1.1;

  letter-spacing: .035em;
}

@media (max-width: 600px) {

  .brand-logo-mark {
    width: 96px !important;
    height: 96px !important;
  }

  .client-brand-logo {
    width: 36px;
    height: 36px;

    flex-basis: 36px;
  }

}



/* =========================================================
   JR-TELECOM CUSTOMER APP - SUPPORT v0.7
   ========================================================= */

.support-card {
  background:
    linear-gradient(
      135deg,
      rgba(37,211,102,.08),
      rgba(13,34,54,.96)
    );

  border:
    1px solid
    rgba(37,211,102,.18);

  border-radius:
    var(--radius);

  padding: 20px;

  margin-bottom: 18px;

  box-shadow:
    0 14px 42px
    rgba(0,0,0,.13);
}

.support-head {
  display: flex;

  align-items: center;

  gap: 13px;

  margin-bottom: 17px;
}

.support-head h2,
.support-head p {
  margin-bottom: 0;
}

.support-icon {
  width: 46px;
  height: 46px;

  flex: 0 0 46px;

  display: grid;
  place-items: center;

  border-radius: 14px;

  background:
    rgba(37,211,102,.11);

  font-size: 1.35rem;
}

.whatsapp-btn {
  background:
    #25D366 !important;

  color:
    #06150c !important;

  border-color:
    #25D366 !important;

  font-weight: 850;
}

.whatsapp-btn:active {
  transform:
    scale(.985);
}

.support-note {
  display: block;

  margin-top: 9px;

  color:
    var(--muted);

  text-align: center;

  font-size: .74rem;
}

#support {
  scroll-margin-bottom:
    calc(
      125px
      + env(safe-area-inset-bottom)
    );
}



/* =========================================================
   JR-TELECOM CUSTOMER APP - TICKETS v0.8
   ========================================================= */

.support-options {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.ticket-box {
  margin-top: 14px;

  border-top:
    1px solid var(--line);

  padding-top: 14px;
}

.ticket-box > summary {
  list-style: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 6px 2px;

  color: var(--text);

  font-weight: 800;
}

.ticket-box > summary::-webkit-details-marker {
  display: none;
}

.ticket-box > summary small {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
}

.ticket-form {
  display: grid;
  gap: 9px;

  margin-top: 14px;

  padding-top: 14px;

  border-top:
    1px solid var(--line);
}

.ticket-form label {
  margin-top: 5px;

  color: var(--muted);

  font-size: .79rem;
  font-weight: 700;
}

.ticket-form select,
.ticket-form textarea {
  width: 100%;

  border:
    1px solid var(--line);

  border-radius: 13px;

  background:
    rgba(5,18,30,.78);

  color: var(--text);

  padding: 12px 13px;

  font: inherit;
}

.ticket-form textarea {
  resize: vertical;

  min-height: 120px;

  line-height: 1.45;
}

.ticket-form select:focus,
.ticket-form textarea:focus {
  outline: none;

  border-color:
    rgba(48,181,255,.70);

  box-shadow:
    0 0 0 3px
    rgba(48,181,255,.08);
}

.ticket-note {
  display: block;

  color: var(--muted);

  text-align: center;

  font-size: .73rem;
  line-height: 1.4;
}



/* =========================================================
   JR-TELECOM TICKETS ADMIN v0.9
   ========================================================= */

.admin-ticket-overview {
  display: flex;
  align-items: center;
  gap: 14px;

  margin-bottom: 18px;
  padding: 18px;

  border:
    1px solid
    rgba(116,215,255,.18);

  border-radius:
    var(--radius);

  background:
    linear-gradient(
      135deg,
      rgba(24,182,255,.10),
      rgba(13,34,54,.96)
    );

  box-shadow:
    0 14px 42px
    rgba(0,0,0,.13);
}

.admin-ticket-overview strong {
  display: block;
  font-size: 1.05rem;
}

.admin-ticket-overview p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .8rem;
}

.admin-ticket-overview-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  flex: 0 0 48px;

  border-radius: 15px;

  background:
    rgba(24,182,255,.11);

  font-size: 1.35rem;
}

.admin-ticket-counter {
  padding: 7px 11px;

  border-radius: 999px;

  background:
    rgba(255,107,107,.15);

  color: #ffd0d0;

  font-size: .75rem;
  font-weight: 850;
}

.admin-ticket-counter.clear {
  background:
    rgba(61,220,151,.12);

  color: #bff6df;
}

.mini-status.ticket-alert {
  color: #ffe0a0;

  background:
    rgba(255,204,102,.12);
}


.ticket-admin-stats {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 9px;

  margin-bottom: 12px;
}

.ticket-stat {
  display: grid;
  gap: 4px;

  padding: 15px;

  text-align: center;

  border:
    1px solid var(--line);

  border-radius: 16px;

  background:
    rgba(13,34,54,.95);
}

.ticket-stat span {
  color: var(--muted);
  font-size: .75rem;
}

.ticket-stat strong {
  font-size: 1.35rem;
}

.ticket-stat.selected {
  border-color:
    rgba(116,215,255,.40);

  background:
    rgba(24,182,255,.09);
}

.ticket-filter-row {
  display: flex;
  gap: 8px;

  margin-bottom: 16px;
}

.admin-ticket-list {
  display: grid;
  gap: 13px;
}

.admin-ticket-card {
  padding: 18px;

  border:
    1px solid var(--line);

  border-radius:
    var(--radius);

  background:
    rgba(13,34,54,.96);

  box-shadow:
    0 14px 42px
    rgba(0,0,0,.13);
}

.admin-ticket-card.ticket-status-new {
  border-left:
    4px solid #74d7ff;
}

.admin-ticket-card.ticket-priority-important {
  border-left-color:
    #ffcc66;
}

.admin-ticket-card.ticket-priority-down {
  border-left-color:
    #ff6b6b;
}

.admin-ticket-header {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: flex-start;
}

.admin-ticket-header h2 {
  margin:
    8px 0 4px;

  font-size: 1.15rem;
}

.ticket-code-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ticket-priority,
.ticket-status-badge {
  display: inline-flex;
  align-items: center;

  border-radius: 999px;

  padding: 5px 8px;

  font-size: .68rem;
  font-weight: 850;
}

.ticket-priority.normal {
  color: var(--muted);

  background:
    rgba(255,255,255,.06);
}

.ticket-priority.important {
  color: #ffe0a0;

  background:
    rgba(255,204,102,.12);
}

.ticket-priority.danger {
  color: #ffc0c0;

  background:
    rgba(255,107,107,.12);
}

.ticket-status-badge.new {
  color: #bfeeff;

  background:
    rgba(24,182,255,.12);
}

.ticket-status-badge.working {
  color: #ffe0a0;

  background:
    rgba(255,204,102,.12);
}

.ticket-status-badge.resolved {
  color: #bff6df;

  background:
    rgba(61,220,151,.12);
}

.ticket-admin-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ticket-admin-meta span {
  padding: 4px 7px;

  border-radius: 8px;

  color: var(--muted);

  background:
    rgba(255,255,255,.045);

  font-size: .72rem;
}

.ticket-description {
  margin: 15px 0;

  padding: 14px;

  border-radius: 13px;

  background:
    rgba(5,18,30,.55);

  white-space: pre-wrap;

  line-height: 1.5;
}

.ticket-email-state {
  margin-bottom: 13px;
}

.mini-status.ticket-error {
  color: #ffc0c0;

  background:
    rgba(255,107,107,.12);
}

.ticket-admin-actions {
  display: grid;
  gap: 9px;

  padding-top: 13px;

  border-top:
    1px solid var(--line);
}

.ticket-status-form {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 7px;
}

.ticket-status-form .btn {
  min-width: 0;
}

.ticket-status-form .ticket-current {
  box-shadow:
    0 0 0 2px
    rgba(116,215,255,.20);
}

.ticket-customer-link {
  text-align: center;
  font-size: .78rem;
}

.customer-phone-panel {
  margin-bottom: 18px;
}

.customer-phone-form {
  display: grid;

  grid-template-columns:
    1fr auto;

  gap: 9px;

  margin-bottom: 8px;
}

.customer-phone-form input {
  width: 100%;

  border:
    1px solid var(--line);

  border-radius: 13px;

  background:
    rgba(5,18,30,.78);

  color: var(--text);

  padding: 12px 13px;

  font: inherit;
}

.customer-ticket-link {
  margin-top: 13px;
}


@media (max-width: 560px) {

  .ticket-admin-stats {
    grid-template-columns:
      repeat(3,1fr);
  }

  .ticket-stat {
    padding:
      12px 7px;
  }

  .admin-ticket-header {
    display: grid;
  }

  .ticket-status-badge {
    width: max-content;
  }

  .ticket-status-form {
    grid-template-columns:
      1fr;
  }

  .customer-phone-form {
    grid-template-columns:
      1fr;
  }

}



/* =========================================================
   REMOVE SERVICE v0.9.1
   ========================================================= */

.delete-service-zone {
  display: grid;
  gap: 10px;

  margin-top: 18px;
}

.delete-service-divider {
  height: 1px;

  margin:
    4px 0 8px;

  background:
    rgba(255,107,107,.20);
}

.delete-service-eyebrow {
  color: #ffc0c0;
}

.delete-service-description {
  margin: 0;

  color: var(--muted);

  font-size: .8rem;
  line-height: 1.45;
}

.delete-service-input {
  width: 100%;

  border:
    1px solid
    rgba(255,107,107,.25);

  border-radius: 13px;

  background:
    rgba(5,18,30,.78);

  color: var(--text);

  padding: 12px 13px;

  font: inherit;
}

.delete-service-input:focus {
  outline: none;

  border-color:
    rgba(255,107,107,.60);

  box-shadow:
    0 0 0 3px
    rgba(255,107,107,.07);
}

.delete-service-note {
  color: var(--muted);

  text-align: center;

  font-size: .72rem;
}



/* =========================================================
   ADD SERVICE v0.10.1
   ========================================================= */

.add-service-panel {
  margin-bottom: 18px;
}

.add-service-form {
  display: grid;
  gap: 10px;
}

.add-service-form label {
  color: var(--muted);

  font-size: .76rem;
  font-weight: 750;
}

.add-service-form select,
.add-service-form input[type="date"] {

  width: 100%;

  border:
    1px solid var(--line);

  border-radius: 13px;

  background:
    rgba(5,18,30,.78);

  color: var(--text);

  padding: 12px 13px;

  font: inherit;
}

.add-service-form select:focus,
.add-service-form input[type="date"]:focus {

  outline: none;

  border-color:
    rgba(116,215,255,.50);

  box-shadow:
    0 0 0 3px
    rgba(116,215,255,.07);
}

.add-service-alert-info {

  display: flex;

  justify-content:
    space-between;

  align-items: center;

  gap: 12px;

  margin: 4px 0;

  padding: 12px;

  border-radius: 13px;

  background:
    rgba(116,215,255,.07);

  font-size: .76rem;
}

.add-service-alert-info span {
  color: var(--muted);
}

.add-service-alert-info strong {
  text-align: right;
}

.all-services-assigned {

  padding: 15px;

  border-radius: 14px;

  background:
    rgba(61,220,151,.07);

  border:
    1px solid
    rgba(61,220,151,.14);
}

.all-services-assigned strong {
  color: #bff6df;
}

.all-services-assigned p {

  margin:
    5px 0 0;

  color: var(--muted);

  font-size: .8rem;
}


@media (max-width: 560px) {

  .add-service-alert-info {
    display: grid;
  }

  .add-service-alert-info strong {
    text-align: left;
  }

}



/* =========================================================
   JR-TELECOM - MIS TICKETS v0.11
   ========================================================= */

.my-tickets-launch-card {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 18px;

  padding: 18px;

  border:
    1px solid
    rgba(116,215,255,.18);

  border-radius:
    var(--radius);

  background:
    linear-gradient(
      135deg,
      rgba(24,182,255,.08),
      rgba(13,34,54,.96)
    );

  box-shadow:
    0 14px 42px
    rgba(0,0,0,.13);
}


.my-tickets-launch-icon {

  width: 48px;
  height: 48px;

  flex: 0 0 48px;

  display: grid;
  place-items: center;

  border-radius: 15px;

  background:
    rgba(116,215,255,.10);

  font-size: 1.35rem;
}


.my-tickets-launch-card h2 {

  margin-bottom: 4px;

  font-size: 1.15rem;
}


.my-tickets-launch-card p {

  margin: 0;

  font-size: .78rem;
}


.my-tickets-hero {

  padding: 20px;

  margin-bottom: 14px;

  border:
    1px solid var(--line);

  border-radius:
    var(--radius);

  background:
    linear-gradient(
      135deg,
      rgba(24,182,255,.11),
      rgba(13,34,54,.96)
    );
}


.my-tickets-hero h2 {

  margin-bottom: 5px;
}


.my-tickets-hero p {

  margin: 0;
}


.client-ticket-stats {

  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 10px;

  margin-bottom: 15px;
}


.client-ticket-stat {

  display: grid;

  gap: 3px;

  padding: 14px;

  border:
    1px solid var(--line);

  border-radius: 15px;

  background:
    rgba(13,34,54,.95);
}


.client-ticket-stat span {

  color: var(--muted);

  font-size: .74rem;
}


.client-ticket-stat strong {

  font-size: 1.35rem;
}


.client-ticket-list {

  display: grid;

  gap: 12px;
}


.client-ticket-card {

  padding: 17px;

  border:
    1px solid var(--line);

  border-left:
    4px solid
    rgba(116,215,255,.75);

  border-radius:
    var(--radius);

  background:
    rgba(13,34,54,.96);

  box-shadow:
    0 14px 42px
    rgba(0,0,0,.12);
}


.client-ticket-card.client-ticket-working {

  border-left-color:
    #ffcc66;
}


.client-ticket-card.client-ticket-resolved {

  border-left-color:
    #3ddc97;
}


.client-ticket-card.client-priority-down {

  border-left-color:
    #ff6b6b;
}


.client-ticket-top {

  display: flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap: 12px;
}


.client-ticket-code {

  color: var(--accent-2);

  font-size: .78rem;
}


.client-ticket-top h3 {

  margin:
    5px 0 0;

  font-size: 1.1rem;
}


.client-ticket-status {

  display: inline-flex;

  padding:
    5px 9px;

  border-radius:
    999px;

  white-space: nowrap;

  font-size: .69rem;

  font-weight: 850;
}


.client-ticket-status.new {

  color: #bfeeff;

  background:
    rgba(24,182,255,.12);
}


.client-ticket-status.working {

  color: #ffe0a0;

  background:
    rgba(255,204,102,.12);
}


.client-ticket-status.resolved {

  color: #bff6df;

  background:
    rgba(61,220,151,.12);
}


.client-ticket-meta {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 9px;

  margin:
    14px 0 11px;
}


.client-ticket-meta > div {

  display: grid;

  gap: 3px;

  padding: 10px;

  border-radius: 11px;

  background:
    rgba(5,18,30,.45);
}


.client-ticket-meta span,
.client-ticket-resolved-date span {

  color: var(--muted);

  font-size: .69rem;
}


.client-ticket-meta strong,
.client-ticket-resolved-date strong {

  font-size: .78rem;
}


.client-ticket-priority {

  width: max-content;

  margin-bottom: 11px;

  padding:
    5px 8px;

  border-radius:
    999px;

  font-size: .7rem;

  font-weight: 800;
}


.client-ticket-priority.important {

  color: #ffe0a0;

  background:
    rgba(255,204,102,.12);
}


.client-ticket-priority.down {

  color: #ffc0c0;

  background:
    rgba(255,107,107,.12);
}


.client-ticket-details {

  margin-top: 10px;

  border-top:
    1px solid var(--line);

  padding-top: 10px;
}


.client-ticket-details summary {

  cursor: pointer;

  color: var(--accent-2);

  font-size: .78rem;

  font-weight: 750;
}


.client-ticket-description {

  margin-top: 11px;

  padding: 12px;

  border-radius: 11px;

  background:
    rgba(5,18,30,.55);

  white-space: pre-wrap;

  line-height: 1.5;

  font-size: .84rem;
}


.client-ticket-resolved-date {

  display: flex;

  justify-content:
    space-between;

  gap: 10px;

  margin-top: 10px;

  padding-top: 10px;

  border-top:
    1px solid var(--line);
}


.client-ticket-empty {

  padding: 24px;

  text-align: center;

  border:
    1px solid var(--line);

  border-radius:
    var(--radius);

  background:
    rgba(13,34,54,.95);
}


.client-ticket-empty-icon {

  margin-bottom: 10px;

  font-size: 2rem;
}


.client-ticket-empty p {

  color: var(--muted);

  margin:
    6px 0 16px;

  font-size: .84rem;
}


.new-ticket-button {

  margin-top: 14px;

  margin-bottom: 22px;
}


@media (max-width: 560px) {

  .my-tickets-launch-card {

    display: grid;

    grid-template-columns:
      auto 1fr;
  }


  .my-tickets-launch-card .btn {

    grid-column:
      1 / -1;

    width: 100%;
  }


  .client-ticket-meta {

    grid-template-columns:
      1fr;
  }

}



/* =========================================================
   TICKET STATUS UI v0.11.1
   ========================================================= */

.ticket-status-control {
  display: grid;
  gap: 6px;
}

.ticket-status-control .eyebrow {
  margin-bottom: 0;
}

.ticket-status-form .ticket-current {
  box-shadow:
    0 0 0 2px
    rgba(116,215,255,.25),
    0 8px 24px
    rgba(24,182,255,.12);
}



/* =========================================================
   EDIT CUSTOMER NAME v0.11.2
   ========================================================= */

.customer-name-panel {
  margin-bottom: 18px;
}

.customer-name-form {

  display: grid;

  grid-template-columns:
    1fr auto;

  gap: 9px;

  margin-bottom: 8px;
}

.customer-name-form input {

  width: 100%;

  border:
    1px solid var(--line);

  border-radius: 13px;

  background:
    rgba(5,18,30,.78);

  color: var(--text);

  padding: 12px 13px;

  font: inherit;
}

.customer-name-form input:focus {

  outline: none;

  border-color:
    rgba(116,215,255,.50);

  box-shadow:
    0 0 0 3px
    rgba(116,215,255,.07);
}


@media (max-width:560px) {

  .customer-name-form {

    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   IMPORTANT MESSAGES ADMIN v0.11.3
   ========================================================= */

.admin-message-intro {
  margin: 7px 0 0;
}

.admin-message-overview {
  border-color: rgba(61,220,151,.20);
}

.admin-message-overview
.admin-ticket-overview-icon {
  background: rgba(61,220,151,.11);
}

.important-message-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.important-message-stat {
  display: grid;
  gap: 5px;
  padding: 16px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(13,34,54,.95);
}

.important-message-stat span {
  color: var(--muted);
  font-size: .73rem;
}

.important-message-stat strong {
  font-size: 1.35rem;
}

.important-message-stat.success {
  border-color: rgba(61,220,151,.24);
}

.important-message-stat.muted {
  opacity: .78;
}

.important-message-compose-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.important-message-compose {
  display: flex;
  flex-direction: column;
}

.important-message-compose.mass {
  border-color: rgba(24,182,255,.22);
}

.important-message-compose.individual {
  border-color: rgba(61,220,151,.20);
}

.important-message-compose-head {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin-bottom: 17px;
}

.important-message-compose-head h2 {
  margin-bottom: 5px;
  font-size: 1.2rem;
}

.important-message-compose-head p {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.45;
}

.important-message-compose-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  border-radius: 14px;
  background: rgba(24,182,255,.10);
  font-size: 1.25rem;
}

.important-message-form {
  display: grid;
  gap: 9px;
  height: 100%;
}

.important-message-form label {
  margin-top: 3px;
  font-weight: 700;
}

.important-message-form textarea,
.important-message-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #081827;
  color: var(--text);
  padding: 13px 14px;
  outline: none;
  font: inherit;
}

.important-message-form textarea {
  min-height: 145px;
  resize: vertical;
  line-height: 1.45;
}

.important-message-form textarea:focus,
.important-message-form select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(24,182,255,.12);
}

.important-message-form small {
  min-height: 36px;
  line-height: 1.4;
}

.important-message-form .btn {
  margin-top: auto;
}

.important-message-form .btn:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.important-message-history {
  margin-top: 0;
}

.important-message-history-list {
  display: grid;
  gap: 10px;
}

.important-message-history-item {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #091a29;
}

.important-message-history-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.important-message-history-head strong,
.important-message-history-head small {
  display: block;
}

.important-message-history-head small {
  margin-top: 4px;
}

.important-message-history-item p {
  margin: 13px 0;
  padding: 12px;
  border-radius: 11px;
  background: rgba(5,18,30,.55);
  white-space: pre-wrap;
  line-height: 1.48;
  font-size: .86rem;
}

.important-message-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.important-message-history-meta span {
  padding: 5px 8px;
  border-radius: 9px;
  color: var(--muted);
  background: rgba(255,255,255,.045);
  font-size: .72rem;
}

@media (max-width: 720px) {

  .important-message-compose-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 520px) {

  .important-message-stats {
    grid-template-columns: 1fr;
  }

  .important-message-stat {
    grid-template-columns: 1fr auto;
    align-items: center;
    text-align: left;
  }

  .important-message-history-head {
    display: grid;
  }

  .important-message-history-head
  .mini-status {
    width: max-content;
  }

}