/* ====== HOME (contenedor principal con scroll) ====== */
.vista-home {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: calc(10px + env(safe-area-inset-top)) 16px 0;
  background: #ECF2F5;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(128px + env(safe-area-inset-bottom));
}

/* ====== HEADER SUPERIOR ====== */
.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.icon-btn {
  appearance: none;
  border: 0;
  background: #FBFBFD;
  color: #0a5c73;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.header-actions {
  display: flex;
  gap: 10px;
}

/* ====== CONTENIDO PRINCIPAL ====== */
.home-content {
  flex: 1;
  margin-top: 12px;
}

.greeting .hola {
  margin: 12px 0 0;
  color: #0a5c73;
  font-weight: 600;
}

.greeting .nombre {
  margin: 0;
  font-size: 22px;
  color: #04222b;
  font-weight: 800;
}

.greeting .sub {
  margin: 6px 0 14px;
  color: #294753;
  opacity: 0.9;
}

.cta-primaria {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(90deg, #00c6a2, #cde80b 85%);
  color: #0c2b2b;
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.1s ease;
}
.cta-primaria:active {
  transform: translateY(1px);
}

.divisor {
  border: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
  margin: 14px 0;
}

.bloque {
  display: grid;
  gap: 10px;
}

.bloque-titulo {
  margin: 0;
  font-size: 14px;
  color: #2b4150;
  font-weight: 700;
}

.tarjeta-servicio {
  display:block;
  width:100%;
  border:0;
  padding:0;
  background:#fff;
  border-radius:18px;
  box-shadow:0 10px 28px rgba(0,0,0,0.18);
  overflow:hidden;
  cursor:pointer;
  text-align:left;
}
.tarjeta-servicio img{
  display:block;
  width:100%;
  height:auto;
}
.tarjeta-servicio:focus-visible{
  outline:2px solid #0ea5e9;
  outline-offset:3px;
}


.tarjeta-servicio-btn{
  display:block; padding:0; border:0; background:transparent; cursor:pointer;
}
.tarjeta-servicio-btn:focus-visible{ outline:2px solid #0ea5e9; outline-offset:4px; }
.tarjeta-servicio-btn img{ display:block; width:100%; height:auto; }


/* ====== VARIABLES DOCK ====== */
:root {
  --ink: #0a6b7c;
  --fab-size: 68px;
  --dock-h: 70px;
  --notch-d: 88px;
}

/* ====== DOCK PLANO Y FIJO ====== */
.nav-inferior {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  background: #fff;
  padding: 16px 28px calc(10px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: center;
  gap: clamp(20px, 7vw, 42px);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06), 0 -8px 22px rgba(0, 0, 0, 0.1);
  height: var(--dock-h);
}

/* ====== NOTCH CSS-ONLY ====== */

/* ====== BOTONES DEL DOCK ====== */
.nav-inferior .tab-btn {
  appearance: none;
  border: 0;
  background: transparent;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.1s ease;
}
.nav-inferior .tab-btn:active {
  transform: translateY(1px);
}

/* ====== FAB (botón HOME flotante) ====== */
.fab-home {
  appearance: none;
  border: 0;
  position: fixed;
  left: 50%;
  bottom: calc(var(--notch-d) / 2 + 6px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 2002;
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 999px;
  background: #FBFBFD;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 28px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: transform 0.1s ease;
}
.fab-home:active {
  transform: translateX(-50%) translateY(1px);
}

/* ====== CORRECCIONES DE STACKING ====== */
html,
body,
#app,
.pila-vistas {
  transform: none !important;
}

/* Backdrop */
.menu-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.28);
  opacity: 0; transition: opacity .18s ease; z-index: 9998;
}
.menu-backdrop.show{ opacity: 1; }

/* Side menu */
.side-menu{
  position: fixed; inset: 0 auto 0 0; width: 280px; max-width: 88vw;
  background: #e7f3f6; color:#0a4150; box-shadow: 0 8px 24px rgba(0,0,0,.2);
  transform: translateX(-100%); transition: transform .18s ease;
  z-index: 9999; border-top-right-radius:14px; border-bottom-right-radius:14px;
  display: flex; flex-direction: column; padding: 14px 12px;
}
.side-menu.open{ transform: translateX(0); }

.side-menu .menu-header{ display:flex; align-items:center; gap:10px; }
.side-menu .logo{ width:72px; height:auto; }
.side-menu .user .name{ font-weight:700; }
.side-menu .user .mail{ font-size:12px; opacity:.8; }
.side-menu .btn-close{
  margin-left:auto; width:32px; height:32px; border-radius:8px;
  border:none; background:#0a5c73; color:#fff; font-size:20px; line-height:1;
}
.side-menu .menu-list{ margin:14px 0; display:flex; flex-direction:column; gap:8px; }
.side-menu .item{
  text-align:left; padding:10px 12px; border-radius:10px; border:none;
  background:#ffffff; color:#0a4150; box-shadow: 0 2px 8px rgba(0,0,0,.06);
  font-size:15px;
}
.side-menu .item:active{ transform: translateY(1px); }

.side-menu hr{ border:none; height:1px; background:#c9dee4; margin:8px 0; }
.side-menu .toggle-row{ display:flex; align-items:center; gap:10px; font-size:14px; }

/* Tema claro opcional (ejemplo simple) */
html.light body{ background:#f7fafb; color:#0a4150; }

/* === Modal Integración === */
.modal-integracion {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  z-index: 9999;
}

.modal-integracion.hidden {
  display: none;
}

.modal-integracion .modal-content {
  position: relative;
  width: 90%;
  max-width: 420px;
  height: 80vh;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
}

.modal-integracion .modal-header {
  background: #069ec0;
  color: #fff;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-integracion .modal-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.modal-integracion .modal-header button {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

.modal-integracion iframe {
  flex: 1;
  width: 100%;
  border: 0;
}

/* Overlay */
.overlay-conn{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:9999}
.overlay-conn.hidden{display:none}
.overlay-conn .box{background:#fff;border-radius:14px;padding:18px 20px;min-width:260px;box-shadow:0 10px 24px rgba(0,0,0,.25);text-align:center}
.overlay-conn .spinner{width:28px;height:28px;margin:0 auto 10px;border-radius:50%;border:3px solid #e5e7eb;border-top-color:#069ec0;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}