/* ============================================================
 * JVRM PWA — Estilos (basados en el diseño aprobado v2)
 * Colores corporativos · bordes visibles · mobile-first
 * ============================================================ */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  background:#dfe6ee;
  font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  color:#1a3a5c;
}

/* Contenedor de la app (pantalla completa, centrado en escritorio) */
.app{
  max-width:480px;margin:0 auto;
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  background:#f4f7fa;overflow:hidden;position:relative;
  box-shadow:0 0 40px rgba(0,0,0,.10);
}

/* ---------------- HEADER ---------------- */
.app-header{
  position:relative;flex-shrink:0;color:#fff;
  background:linear-gradient(135deg,#1a3a5c 0%,#00AEEF 100%);
  padding:calc(env(safe-area-inset-top) + 22px) 20px 18px;
}
.app-header .logo-row{display:flex;align-items:center;gap:11px;}
.app-header .logo{width:40px;height:40px;background:rgba(255,255,255,.16);border-radius:11px;display:flex;align-items:center;justify-content:center;}
.app-header .logo svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8;}
.app-header .logo img{width:28px;height:auto;display:block;}
.app-header h1{font-size:19px;font-weight:700;line-height:1.1;}
.app-header .sub{font-size:12px;opacity:.85;margin-top:2px;}
.fecha-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.15);padding:5px 13px;border-radius:20px;font-size:12px;font-weight:600;margin-top:13px;}
.fecha-chip.offline{background:rgba(0,0,0,.18);}
.live-dot{width:7px;height:7px;border-radius:50%;background:#5dff8f;flex-shrink:0;}
.live-dot.pulsa{animation:pulse 2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(93,255,143,.6);}70%{box-shadow:0 0 0 8px rgba(93,255,143,0);}100%{box-shadow:0 0 0 0 rgba(93,255,143,0);}}

/* Campanita */
.bell{position:absolute;top:calc(env(safe-area-inset-top) + 20px);right:16px;width:40px;height:40px;border:none;background:rgba(255,255,255,.16);border-radius:11px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.bell svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.bell-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;background:#ff4d4f;color:#fff;border-radius:9px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #1a3a5c;}

/* ---------------- MENÚ ---------------- */
.nav-sticky{flex-shrink:0;background:#fff;border-bottom:1px solid #e3ebf0;display:flex;justify-content:space-around;box-shadow:0 2px 12px rgba(0,0,0,.06);z-index:5;}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 0 9px;font-size:11px;color:#9aabbc;font-weight:600;position:relative;cursor:pointer;transition:color .2s;}
.nav-item svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.nav-item.active{color:#00AEEF;}
.nav-item.active::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:32px;height:3px;background:#00AEEF;border-radius:3px 3px 0 0;}

/* ---------------- SCROLL / VISTAS ---------------- */
.app-scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative;}
.app-scroll::-webkit-scrollbar{width:0;}
.view{display:none;}
.view.activa{display:block;}
.content{padding:18px 16px 30px;}

/* Pull-to-refresh */
.ptr{height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:12px;color:#5a7a8a;transition:height .15s;}

/* Títulos de sección */
.sec-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#1a3a5c;margin:20px 2px 12px;}
.sec-title:first-child{margin-top:4px;}
.sec-title .bar{width:4px;height:16px;background:#00AEEF;border-radius:3px;}

/* ---------------- HÉROE ---------------- */
.hero-caudal{background:linear-gradient(160deg,#fff 0%,#eaf6fc 100%);border-radius:22px;padding:24px 22px;box-shadow:0 6px 20px rgba(0,174,239,.13);border:1px solid #cfe4f0;margin-bottom:14px;text-align:center;position:relative;overflow:hidden;}
.hero-caudal::before{content:'';position:absolute;top:-40px;right:-40px;width:130px;height:130px;background:radial-gradient(circle,rgba(0,174,239,.10),transparent 70%);}
.hero-label{font-size:13px;color:#5a7a8a;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.hero-valor{font-size:58px;font-weight:800;color:#00AEEF;line-height:1;letter-spacing:-1px;}
.hero-unidad{font-size:20px;color:#7a9aaa;font-weight:600;}
.hero-sitio{font-size:14px;color:#1a3a5c;font-weight:600;margin-top:8px;}
.hero-trend{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;padding:4px 13px;border-radius:14px;margin-top:12px;}
.trend-up{background:#e3f7e8;color:#1f9d4d;}
.trend-down{background:#fdeaea;color:#c0392b;}
.hero-trend svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5;}

.spark-wrap{margin-top:16px;padding-top:14px;border-top:1px solid #e0ecf2;}
.spark-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;}
.spark-label{font-size:11px;color:#9aabbc;text-align:left;}
.spark-toggle{display:flex;flex-shrink:0;border:1px solid #cfe0ea;border-radius:9px;overflow:hidden;}
.ch-tg{border:none;background:#fff;color:#7a9aaa;font-size:11px;font-weight:700;padding:4px 11px;cursor:pointer;}
.ch-tg.activo{background:#00AEEF;color:#fff;}
.spark{display:flex;align-items:flex-end;gap:5px;height:54px;margin-bottom:16px;}
.spark-bar{flex:1;background:linear-gradient(180deg,#00AEEF,#7fd4f0);border-radius:4px 4px 0 0;min-height:8px;position:relative;cursor:pointer;transition:opacity .15s;}
.spark-bar:active{opacity:.6;}
.spark-bar.hoy{background:linear-gradient(180deg,#1a3a5c,#00AEEF);}
.spark-bar::after{content:attr(data-dia);position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);font-size:9px;color:#9aabbc;font-weight:600;white-space:nowrap;}
.spark-bar.hoy::after{color:#1a3a5c;font-weight:800;}
.spark-vacio{font-size:12px;color:#9aabbc;padding:14px 0;text-align:center;}

/* ---------------- KPIs ---------------- */
.kpi-row{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:4px;}
.kpi-mini{background:#fff;border-radius:18px;padding:16px;box-shadow:0 3px 12px rgba(0,0,0,.06);border:1px solid #e3ebf0;}
.kpi-mini .ic{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
.kpi-mini .ic svg{width:19px;height:19px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.kpi-mini .k-label{font-size:11px;color:#7a8a9a;font-weight:600;margin-bottom:4px;}
.kpi-mini .k-val{font-size:24px;font-weight:800;color:#1a3a5c;line-height:1;}
.kpi-mini .k-sub{font-size:11px;color:#9aabbc;margin-top:3px;}

/* ---------------- DISTRIBUCIÓN (minimalista, sin caja) ---------------- */
.dist-card{background:transparent;border:none;box-shadow:none;border-radius:0;padding:2px 2px 4px;margin-bottom:16px;}
.dist-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px;}
.dist-top .lbl{font-size:13px;color:#5a7a8a;font-weight:600;line-height:1.3;}
.dist-top .pct{font-size:33px;font-weight:800;color:#e8a020;line-height:1;}
.dist-bar-bg{height:9px;background:#e8eef2;border-radius:6px;overflow:hidden;}
.dist-bar-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,#e8a020,#f0bd55);width:0;transition:width .5s;}
.dist-note{font-size:11px;color:#9aabbc;margin-top:9px;line-height:1.4;}

/* ---------------- EMBALSES (carrusel) ---------------- */
.emb-scroll{display:flex;gap:12px;overflow-x:auto;padding:2px 16px 10px;margin:0 -16px;}
.emb-scroll::-webkit-scrollbar{height:0;}
/* Botones para cambiar la vista de embalses (deslizar / cuadrícula) */
.emb-toggle{margin-left:auto;display:flex;gap:6px;}
.emb-tg{width:32px;height:28px;border:1px solid #cfe0ea;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.emb-tg svg{width:17px;height:17px;stroke:#7a9aaa;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.emb-tg.activo{background:#00AEEF;border-color:#00AEEF;}
.emb-tg.activo svg{stroke:#fff;}
/* Vista en cuadrícula 2×2 */
.emb-scroll.emb-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;overflow:visible;margin:0;padding:2px 0 6px;}
.emb-scroll.emb-grid2 .emb-card{min-width:0;}
.emb-card{min-width:152px;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.08);border:1px solid #e3ebf0;flex-shrink:0;}
.emb-head{padding:11px 14px;text-align:center;color:#fff;font-size:13px;font-weight:700;}
.emb-head.verde{background:linear-gradient(135deg,#2d7a3a,#3db54a);}
.emb-head.azul{background:linear-gradient(135deg,#1a3a5c,#00AEEF);}
.emb-body{padding:16px 14px;text-align:center;}
.emb-pct{font-size:30px;font-weight:800;line-height:1;margin-bottom:8px;}
.emb-pct.verde{color:#2d7a3a;}
.emb-pct.azul{color:#00AEEF;}
.emb-hm3{font-size:15px;font-weight:700;color:#1a3a5c;}
.emb-cap{font-size:11px;color:#9aabbc;margin-top:2px;}
.emb-ant{font-size:10px;color:#7a8a9a;margin-top:10px;padding-top:9px;border-top:1px solid #eef2f5;}
.emb-ant b{color:#5a7a8a;font-size:13px;}

/* ---------------- DETALLE DEL CAUDAL (ordenado, años sobre columnas) ---------------- */
.cd-card{background:#fff;border-radius:18px;border:1px solid #e3ebf0;box-shadow:0 4px 14px rgba(0,0,0,.06);overflow:hidden;}
.cd-hdr{background:linear-gradient(135deg,#1a3a5c,#00AEEF);color:#fff;padding:14px 18px 12px;}
.cd-hdr-tit{font-size:18px;font-weight:800;line-height:1.15;}
.cd-hdr-sub{font-size:12px;opacity:.85;margin-top:3px;}
.cd-anios{display:flex;align-items:center;gap:10px;padding:12px 16px 4px;}
.cd-anios .cd-sp{flex:1;}
.cd-anio{width:62px;flex-shrink:0;text-align:center;font-size:12px;font-weight:700;padding:4px 0;border-radius:11px;background:#e8f4fb;color:#0077a8;}
.cd-anio.ant{background:#f0f3f6;color:#8a9aa8;}
.cd-body{padding:2px 16px 14px;}
.cd-fila{display:flex;align-items:center;gap:10px;padding:11px 0;}
.cd-fila + .cd-fila{border-top:1px solid #f0f4f7;}
.cd-etq{flex:1;display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:14px;color:#5a7a8a;line-height:1.3;}
.cd-u{font-size:11px;font-weight:600;color:#9aabbc;white-space:nowrap;}
.cd-v{width:62px;text-align:center;font-size:15px;font-weight:700;color:#1a3a5c;flex-shrink:0;font-variant-numeric:tabular-nums;}
.cd-v.ant{color:#9aabbc;font-weight:600;}
.cd-fila.dest{background:linear-gradient(90deg,#f4fbfe,#eaf6fc);border-radius:10px;padding-left:10px;padding-right:10px;margin:2px -10px;}
.cd-fila.dest + .cd-fila{border-top:none;}
.cd-fila.dest .cd-etq{color:#1a3a5c;font-weight:700;}
.cd-fila.dest .cd-v{color:#00AEEF;font-size:17px;}
.cd-fila.dest .cd-v.ant{color:#9aabbc;font-size:15px;font-weight:600;}
.cd-etq .tip{margin-left:1px;}

.foot{text-align:center;font-size:10px;color:#aabbc8;padding:18px 20px 6px;line-height:1.5;}

/* ---------------- VISTA EMBALSES (detalle) ---------------- */
.embv-grid{display:flex;flex-direction:column;gap:14px;}
.embv-card{background:#fff;border-radius:18px;overflow:hidden;border:1px solid #e3ebf0;box-shadow:0 3px 12px rgba(0,0,0,.06);}
.embv-head{padding:13px 16px;color:#fff;font-size:15px;font-weight:700;}
.embv-head.verde{background:linear-gradient(135deg,#2d7a3a,#3db54a);}
.embv-head.azul{background:linear-gradient(135deg,#1a3a5c,#00AEEF);}
.embv-body{padding:16px;}
.embv-now{text-align:center;margin-bottom:14px;}
.embv-pct{font-size:38px;font-weight:800;line-height:1;}
.embv-pct.verde{color:#2d7a3a;}
.embv-pct.azul{color:#00AEEF;}
.embv-hm3{font-size:18px;font-weight:700;color:#1a3a5c;margin-top:4px;}
.embv-hm3 span{font-size:13px;color:#7a9aaa;font-weight:600;}
.embv-cap{font-size:12px;color:#9aabbc;margin-top:2px;}
.embv-tabla{width:100%;border-collapse:collapse;font-size:13px;}
.embv-tabla th,.embv-tabla td{padding:8px 6px;border-bottom:1px solid #eef2f5;text-align:right;}
.embv-tabla th{color:#7a8a9a;font-size:11px;text-transform:uppercase;letter-spacing:.03em;}
.embv-tabla th:first-child,.embv-tabla td:first-child{text-align:left;color:#5a7a8a;}
.embv-tabla td{font-weight:700;color:#1a3a5c;}
.embv-tabla tr:last-child td{border-bottom:none;}

/* ---------------- VISTA TEMPORADAS ---------------- */
.tcard{background:#fff;border-radius:18px;padding:18px;border:1px solid #e3ebf0;box-shadow:0 3px 12px rgba(0,0,0,.06);margin-bottom:6px;}
.tcard-note{font-size:11px;color:#9aabbc;margin-top:12px;line-height:1.4;text-align:center;}
.tmes-graf{display:flex;align-items:flex-end;gap:8px;height:130px;padding-top:10px;}
.tmes-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;}
.tmes-bar{width:100%;max-width:34px;border-radius:5px 5px 0 0;min-height:6px;}
.tmes-val{font-size:10px;font-weight:700;color:#1a3a5c;margin-top:5px;}
.tmes-lbl{font-size:11px;color:#7a8a9a;margin-top:2px;}
.tcomp-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.tcomp-row:last-of-type{margin-bottom:0;}
.tcomp-lbl{width:78px;font-size:12px;font-weight:700;color:#1a3a5c;flex-shrink:0;}
.tcomp-now{font-size:9px;background:#a855f7;color:#fff;padding:1px 6px;border-radius:8px;font-weight:700;}
.tcomp-bar-bg{flex:1;height:14px;background:#eef2f5;border-radius:8px;overflow:hidden;}
.tcomp-bar{height:100%;border-radius:8px;}
.tcomp-val{width:48px;text-align:right;font-size:13px;font-weight:800;color:#1a3a5c;flex-shrink:0;}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.tdet{background:#fff;border-radius:16px;padding:14px;border:1px solid #e3ebf0;border-top:4px solid #00AEEF;box-shadow:0 3px 12px rgba(0,0,0,.06);}
.tdet-tit{font-size:13px;font-weight:800;color:#1a3a5c;margin-bottom:8px;}
.tdet-row{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;color:#5a7a8a;}
.tdet-row b{color:#1a3a5c;}

/* ---------------- VISTA INFO ---------------- */
.info-card{background:#fff;border-radius:18px;padding:18px;border:1px solid #e3ebf0;box-shadow:0 3px 12px rgba(0,0,0,.06);font-size:14px;line-height:1.55;color:#3a5a6a;}
.info-card p{margin-bottom:8px;}
.info-card p:last-child{margin-bottom:0;}
.info-card a{color:#00AEEF;font-weight:600;text-decoration:none;}
.info-term{font-size:14px;font-weight:700;color:#1a3a5c;margin-top:12px;margin-bottom:3px;}
.info-term:first-child{margin-top:0;}
.info-desc{font-size:13px;color:#5a7a8a;line-height:1.5;}
.info-mini{font-size:11px;color:#9aabbc;}

/* ---------------- VISTA AVISOS ---------------- */
.avisos-lista{display:flex;flex-direction:column;gap:12px;}
.avisos-vacio{text-align:center;color:#9aabbc;font-size:14px;padding:40px 0;}
.aviso-card{background:#fff;border-radius:16px;padding:14px 16px;border:1px solid #e3ebf0;border-left:4px solid #00AEEF;box-shadow:0 3px 12px rgba(0,0,0,.06);}
.aviso-top{display:flex;align-items:center;gap:8px;margin-bottom:7px;flex-wrap:wrap;}
.aviso-tipo{font-size:10px;font-weight:700;color:#fff;padding:2px 9px;border-radius:8px;text-transform:uppercase;letter-spacing:.03em;}
.aviso-fecha{font-size:11px;color:#9aabbc;}
.aviso-nuevo{font-size:10px;font-weight:700;color:#ff4d4f;background:#ffe9ea;padding:1px 7px;border-radius:8px;margin-left:auto;}
.aviso-titulo{font-size:15px;font-weight:700;color:#1a3a5c;line-height:1.3;}
.aviso-sub{font-size:13px;font-weight:600;color:#5a7a8a;margin-top:2px;}
.aviso-msg{font-size:13px;color:#5a7a8a;line-height:1.5;margin-top:6px;}
.aviso-link{display:inline-block;margin-top:9px;font-size:13px;font-weight:700;color:#00AEEF;text-decoration:none;}

/* ---------------- MODAL (pop-up de aviso) ---------------- */
.aviso-modal{position:fixed;inset:0;background:rgba(26,58,92,.55);display:none;align-items:center;justify-content:center;padding:24px;z-index:100;}
.aviso-modal.abierto{display:flex;}
.aviso-modal-caja{background:#fff;border-radius:20px;max-width:380px;width:100%;padding:24px 22px 22px;position:relative;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.3);animation:modalIn .25s ease;}
/* Ventanita compacta (para el detalle de una barrita del gráfico) */
.aviso-modal-caja.compacto{max-width:230px;padding:20px 20px 16px;border-radius:16px;}
.aviso-modal-caja.compacto .modal-titulo{font-size:16px;}
.aviso-modal-caja.compacto .modal-msg{margin-top:8px;}
.aviso-modal-caja.compacto .modal-cerrar{margin-top:14px;padding:9px;font-size:14px;}
@keyframes modalIn{from{transform:translateY(16px) scale(.97);opacity:0;}to{transform:none;opacity:1;}}
.modal-barra{position:absolute;top:0;left:0;right:0;height:6px;background:#00AEEF;}
.modal-tipo{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-top:6px;margin-bottom:6px;}
.modal-titulo{font-size:21px;font-weight:800;color:#1a3a5c;line-height:1.2;}
.modal-sub{font-size:15px;font-weight:600;color:#5a7a8a;margin-top:6px;}
.modal-msg{font-size:14px;color:#5a7a8a;line-height:1.55;margin-top:12px;}
.modal-link{display:inline-block;margin-top:14px;font-size:14px;font-weight:700;color:#00AEEF;text-decoration:none;}
.modal-cerrar{display:block;width:100%;margin-top:18px;padding:13px;background:#00AEEF;color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;}
.modal-cerrar:active{background:#0095cc;}

/* ---------------- AYUDA DE INSTALACIÓN ---------------- */
.install-hint{flex-shrink:0;display:none;align-items:center;gap:12px;margin:12px;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,#00AEEF 0%,#1a3a5c 100%);color:#fff;box-shadow:0 6px 18px rgba(0,174,239,.32);z-index:6;}
.install-hint.visible{display:flex;}
.install-ic{width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,.20);display:flex;align-items:center;justify-content:center;flex-shrink:0;animation:installpulse 2.2s infinite;}
.install-ic svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
@keyframes installpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}50%{box-shadow:0 0 0 7px rgba(255,255,255,.14);}}
.install-body{flex:1;min-width:0;}
.install-title{font-size:16px;font-weight:800;line-height:1.15;}
.install-sub{font-size:12.5px;opacity:.92;line-height:1.35;margin-top:2px;}
.install-hint-btn{background:#fff;color:#0077a8;border:none;border-radius:10px;padding:9px 15px;font-size:14px;font-weight:800;cursor:pointer;flex-shrink:0;}
.install-hint-x{background:rgba(255,255,255,.20);border:none;color:#fff;font-size:14px;line-height:1;cursor:pointer;flex-shrink:0;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;}

.hdr-salir{position:absolute;top:calc(env(safe-area-inset-top) + 23px);right:64px;height:34px;padding:0 13px;border:none;background:rgba(255,255,255,.16);border-radius:17px;display:flex;align-items:center;gap:6px;cursor:pointer;color:#fff;font-size:13px;font-weight:700;}
.hdr-salir svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.hdr-salir:active{background:rgba(255,255,255,.28);}

/* Ícono de información ⓘ (tooltips del dashboard) */
.tip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:none;background:transparent;padding:0;cursor:pointer;vertical-align:middle;flex-shrink:0;}
.tip svg{width:18px;height:18px;stroke:#00AEEF;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.tip:active svg{stroke:#1a3a5c;}

/* ---------------- PANTALLA DE ESCRITORIO (solo teléfonos) ---------------- */
.desktop-gate{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,#1a3a5c 0%,#00AEEF 100%);}
.dg-card{background:#fff;border-radius:24px;max-width:400px;width:100%;padding:34px 30px 28px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.30);}
.dg-logo{width:64px;height:64px;border-radius:16px;margin:0 auto 14px;display:block;}
.dg-card h2{font-size:21px;color:#1a3a5c;font-weight:800;line-height:1.15;}
.dg-lead{font-size:15px;color:#5a7a8a;margin-top:9px;line-height:1.4;}
.dg-qr{width:210px;height:210px;margin:20px auto 10px;display:block;border:1px solid #e3ebf0;border-radius:12px;padding:8px;background:#fff;}
.dg-hint{font-size:13px;color:#5a7a8a;line-height:1.55;}
.dg-hint b{color:#00AEEF;}
.dg-foot{margin-top:18px;font-size:11px;color:#9aabbc;border-top:1px solid #eef2f5;padding-top:14px;}

@media(max-width:380px){
  .hero-valor{font-size:50px;}
  .tgrid{grid-template-columns:1fr;}
}