/* ============================================================
   STYLES.CSS — Dashboard Modules  |  Portal Médico
   ============================================================ */

/* ── Safe area (iPhone con notch/Dynamic Island) ─────────── */
/* viewport-fit=cover en index.html activa env(safe-area-inset-*) */
:root {
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top:    env(safe-area-inset-top,    0px);
    --safe-left:   env(safe-area-inset-left,   0px);
    --safe-right:  env(safe-area-inset-right,  0px);
}

/* ── Utility ─────────────────────────────────────────────── */
.bg-gradient, .bg-noise, .search-section { display: none !important; }
.results-section { padding: 4px 0; max-width: 1200px; margin: 0 auto; width: 100%; }
.text-right  { text-align: right; }
.text-center { text-align: center; }

/* ── Loading ─────────────────────────────────────────────── */
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 40px; gap: 18px; }
.loading-spinner { width: 40px; height: 40px; border: 3px solid #e8f0f9; border-top-color: #0071e3; border-radius: 50%; animation: spin 0.75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { color: #8aa3be; font-size: 0.88rem; font-weight: 500; }

/* ── Empty / Error states ────────────────────────────────── */
.no-results { text-align: center; padding: 80px 40px; }
.no-results-icon { font-size: 3rem; margin-bottom: 16px; }
.no-results h3 { font-size: 1.2rem; color: #0f1f35; margin-bottom: 8px; font-weight: 700; }
.no-results p  { color: #8aa3be; font-size: 0.9rem; line-height: 1.6; }

.modulo-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 40px; background: white; border-radius: 24px;
  border: 1.5px dashed #c5d4e4; text-align: center;
}
.mes-icon { font-size: 3rem; margin-bottom: 22px; }
.modulo-empty-state h3 { font-size: 1.1rem; color: #0f1f35; margin-bottom: 8px; font-weight: 700; }
.modulo-empty-state p  { color: #8aa3be; font-size: 0.88rem; max-width: 260px; line-height: 1.65; }

/* ── Card base ───────────────────────────────────────────── */
.section-card {
  background: white;
  border-radius: 20px;
  border: 1px solid #e8f0f9;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(6,14,30,0.05), 0 1px 2px rgba(6,14,30,0.04);
}

.section-header {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 24px 16px;
  border-bottom: 1px solid #f4f8fd;
  background: linear-gradient(135deg, #f8faff 0%, white 100%);
}
.section-header h3 { font-size: 0.97rem; font-weight: 700; color: #060e1e; flex: 1; margin: 0; }
.section-header span:first-child { font-size: 1rem; }
.section-badge {
  background: #eff6ff; color: #1a5fb4;
  font-size: 0.7rem; font-weight: 700;
  padding: 4px 11px; border-radius: 100px;
  letter-spacing: 0.05em; text-transform: uppercase;
  border: 1px solid #bfdbfe;
}

/* ── Profile hero card ───────────────────────────────────── */
.profile-card {
  background: linear-gradient(150deg, var(--blue-900, #020d1f) 0%, #061830 50%, #0a2347 100%);
  border-radius: 22px;
  padding: 30px 34px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(2,13,31,0.2), 0 2px 8px rgba(2,13,31,0.12);
}
.profile-card::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}
.profile-card::after {
  content: '';
  position: absolute; bottom: -80px; right: -80px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(0,113,227,0.12) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.profile-header { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; position: relative; z-index: 1; }
.profile-avatar {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, rgba(0,113,227,0.45), rgba(0,64,140,0.3));
  border-radius: 18px; display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; flex-shrink: 0;
  border: 1px solid rgba(0,113,227,0.35);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.profile-info h2 { color: white; font-size: 1.3rem; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.02em; }
.profile-info p  { color: rgba(255,255,255,0.4); font-size: 0.82rem; }

.profile-details { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; position: relative; z-index: 1; }
.detail-item {
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 13px 16px;
  transition: background 0.2s;
}
.detail-item:hover { background: rgba(255,255,255,0.09); }
.detail-item .label {
  color: rgba(255,255,255,0.3);
  font-size: 0.67rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  margin-bottom: 8px;
}
.detail-item .value { color: rgba(255,255,255,0.78); font-size: 0.87rem; font-weight: 500; }
.detail-item .tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
  background: rgba(0,113,227,0.28); color: #93c5fd;
  padding: 3px 10px; border-radius: 100px;
  font-size: 0.73rem; font-weight: 600;
  border: 1px solid rgba(0,113,227,0.22);
  white-space: nowrap;
}

/* ── Stats grid ──────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 22px; }

.stat-card {
  background: white; border-radius: 18px;
  padding: 24px 26px;
  border: 1px solid #e8f0f9;
  box-shadow: 0 2px 8px rgba(6,14,30,0.05);
  transition: all 0.24s;
  position: relative; overflow: hidden;
}
.stat-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  border-radius: 18px 18px 0 0;
}
.stat-card.registros::before { background: linear-gradient(90deg, #0071e3, #38bdf8); }
.stat-card.unidades::before  { background: linear-gradient(90deg, #16a34a, #4ade80); }
.stat-card.total::before     { background: linear-gradient(90deg, #d97706, #fbbf24); }
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(6,14,30,0.1); border-color: #c5d4e4; }

.stat-icon { font-size: 1.6rem; margin-bottom: 14px; display: block; }
.stat-card h3 {
  color: #8aa3be; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px;
}
.stat-card .number {
  font-size: 2.1rem; font-weight: 800; color: #060e1e;
  line-height: 1; letter-spacing: -0.04em;
}

/* ── Summary table ───────────────────────────────────────── */
.zona-resumen-table-wrap { overflow-x: auto; }
.zona-resumen-table { width: 100%; border-collapse: collapse; }

.zona-resumen-table thead tr { background: #f8faff; }
.zona-resumen-table th {
  padding: 13px 20px;
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #8aa3be; text-align: left;
  border-bottom: 1px solid #e8f0f9;
  white-space: nowrap;
}

.zona-resumen-table tbody tr { border-bottom: 1px solid #f4f8fd; transition: background 0.15s; }
.zona-resumen-table tbody tr:last-child { border-bottom: none; }
.zona-resumen-table tbody tr:hover { background: #f8faff; }
.zona-resumen-table td { padding: 15px 20px; font-size: 0.9rem; color: #1a2f4a; vertical-align: middle; }

.zona-resumen-table tfoot tr { background: #f4f8fd; border-top: 2px solid #e8f0f9; }
.zona-resumen-table tfoot td { padding: 14px 20px; font-size: 0.9rem; font-weight: 700; }

.zona-resumen-nombre { font-weight: 700; color: #060e1e; display: flex; align-items: center; gap: 10px; }
.zona-dot { width: 8px; height: 8px; background: #0071e3; border-radius: 50%; flex-shrink: 0; }
.zona-resumen-ciudad { font-size: 0.77rem; color: #8aa3be; margin-top: 3px; padding-left: 18px; }
.badge-productos {
  background: #eff6ff; color: #1a5fb4;
  padding: 4px 12px; border-radius: 100px;
  font-size: 0.76rem; font-weight: 700;
  border: 1px solid #bfdbfe;
}
.formulacion-status-card {
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid #dfe9f5;
  box-shadow: 0 16px 44px rgba(10, 35, 71, 0.08), 0 2px 8px rgba(10, 35, 71, 0.04);
  background:
    radial-gradient(circle at top right, rgba(59,130,246,0.06), transparent 22%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
.formulacion-status-header {
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 24px 26px 18px;
  background:
    linear-gradient(180deg, rgba(247,250,255,0.96) 0%, rgba(255,255,255,0.98) 100%);
  border-bottom: 1px solid #e8f0f8;
}
.formulacion-status-header::before {
  content: '';
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
  display: block;
  margin-bottom: 10px;
}
.formulacion-status-header > div {
  min-width: 0;
  flex: 1;
}
.formulacion-status-header h3 {
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}
.formulacion-status-header p {
  margin: 6px 0 0;
  color: #6d83a2;
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 760px;
}
.form-status-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 20px 26px 10px;
}
.form-status-kpi {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
  border: 1px solid #dbe8f5;
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.form-status-kpi::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #3b82f6 0%, #93c5fd 100%);
}
.form-status-kpi-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #7f93af;
  margin-bottom: 10px;
}
.form-status-kpi-value {
  display: block;
  font-size: 2rem;
  line-height: 1;
  color: #0a2347;
  letter-spacing: -0.04em;
}
.form-status-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  padding: 12px 24px 8px;
}
.form-status-item {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #e5eef8;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(10, 35, 71, 0.05);
}
.form-status-item-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.form-status-item-date {
  color: #6f86a5;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.form-status-item-title {
  margin: 0;
  color: #081a33;
  font-size: 1rem;
  line-height: 1.3;
}
.form-status-item-meta {
  display: grid;
  gap: 6px;
  color: #47617f;
  font-size: 0.84rem;
  margin-bottom: 12px;
}
.form-status-item-comment {
  background: #f5f8fc;
  border: 1px solid #e6eef7;
  border-radius: 14px;
  padding: 12px 13px;
  color: #334e6d;
  font-size: 0.84rem;
  line-height: 1.55;
}
.form-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.form-status-pill.tone-success {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}
.form-status-pill.tone-info {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #bfdbfe;
}
.form-status-pill.tone-warning {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}
.form-status-pill.tone-danger {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}
.form-status-table-wrap {
  padding: 12px 26px 26px;
}
.form-status-table {
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 18px;
}
.form-status-table thead th {
  background: #f7faff;
  color: #6d83a2;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e5edf7;
}
.form-status-table tbody td {
  padding-top: 17px;
  padding-bottom: 17px;
  font-size: 0.94rem;
  border-bottom: 1px solid #edf3f9;
  vertical-align: middle;
}
.form-status-table tbody tr:last-child td {
  border-bottom: none;
}
.form-status-table tbody tr {
  transition: background-color 0.18s ease;
}
.form-status-table tbody tr:hover {
  background: #f9fbff;
}
.form-status-table tbody td:first-child {
  color: #56708f;
  font-weight: 600;
}
.form-status-table tbody td:nth-child(2) {
  color: #081a33;
  font-weight: 700;
}
.form-status-table tbody td:last-child {
  color: #3e5877;
  line-height: 1.6;
}
.form-status-empty {
  padding: 18px;
  border-radius: 16px;
  border: 1px dashed #d9e6f5;
  background: #f9fbfe;
  color: #6d83a2;
  text-align: center;
  font-size: 0.9rem;
}
.form-status-cards {
  display: none;
}
.form-status-table-wrap {
  display: block;
}
.valor-zona { color: #15803d; font-weight: 700; font-size: 0.94rem; }
.valor-total-general { color: #0071e3; font-size: 0.97rem; font-weight: 800; }

/* ── Zona cards — Detalle ────────────────────────────────── */
.zona-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(520px,100%), 1fr)); gap: 20px; padding: 20px 24px; }

.zona-card { background: #fafbff; border: 1px solid #e8f0f9; border-radius: 18px; overflow: hidden; transition: box-shadow 0.2s; }
.zona-card:hover { box-shadow: 0 8px 28px rgba(6,14,30,0.08); }

.zona-card-header { padding: 18px 22px 14px; background: white; border-bottom: 1px solid #f4f8fd; }
.zona-title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.97rem; color: #060e1e; margin-bottom: 4px; }
.zona-icon  { font-size: 1rem; }
.zona-ciudad { font-size: 0.79rem; color: #8aa3be; padding-left: 26px; }

.zona-stats-row { display: flex; border-bottom: 1px solid #f4f8fd; background: white; }
.zona-stat { flex: 1; padding: 12px 22px; border-right: 1px solid #f4f8fd; }
.zona-stat:last-child { border-right: none; }
.zona-stat-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #8aa3be; margin-bottom: 4px; }
.zona-stat-value { font-size: 1.06rem; font-weight: 800; color: #060e1e; letter-spacing: -0.02em; }
.zona-stat-valor .zona-stat-value { color: #15803d; }

/* Desktop: gráfica izquierda, tabla derecha en paralelo */
.zona-card-body {
  display: flex; flex-direction: row; align-items: flex-start;
  gap: 16px; padding: 16px 22px 20px;
}
.zona-chart-container { flex: 1.4; min-width: 0; }
.zona-table-wrap {
  flex: 1; min-width: 180px; overflow-y: auto;
  border-radius: 8px; border: 1px solid #e8f0f9;
}
.zona-table-wrap::-webkit-scrollbar { width: 4px; }
.zona-table-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.zona-table { width: 100%; font-size: 0.83rem; border-collapse: collapse; }
.zona-table th { font-size: 0.69rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #8aa3be; padding: 7px 12px; border-bottom: 1px solid #e8f0f9; text-align: left; white-space: nowrap; position: sticky; top: 0; background: #fff; z-index: 1; }
.zona-table td { padding: 6px 12px; color: #1a2f4a; border-bottom: 1px solid #f4f8fd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zona-table td:first-child { max-width: 0; width: 100%; }
.zona-subtotal td { background: #f8faff; font-weight: 700; border-top: 1.5px solid #e8f0f9; border-bottom: none; position: sticky; bottom: 0; z-index: 1; }

/* ── Mis Zonas ───────────────────────────────────────────── */
.zonas-impact-header {
  display: flex; align-items: center; justify-content: center; gap: 52px;
  background: linear-gradient(150deg, #020d1f 0%, #061830 50%, #0a2347 100%);
  border-radius: 22px; padding: 34px 44px; margin-bottom: 22px;
  box-shadow: 0 12px 40px rgba(2,13,31,0.2);
  position: relative; overflow: hidden;
}
.zonas-impact-header::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 30px 30px; pointer-events: none;
}
.zia-stat { text-align: center; position: relative; }
.zia-number { font-size: 2.6rem; font-weight: 800; color: white; letter-spacing: -0.05em; line-height: 1; margin-bottom: 6px; }
.zia-label  { font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.09em; }
.zia-divider { width: 1px; height: 52px; background: rgba(255,255,255,0.1); }

.zonas-impact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 14px; padding: 20px 24px; }

.zona-impact-card {
  background: white; border-radius: 16px; padding: 18px 20px;
  border: 1px solid #e8f0f9; border-left: 3px solid var(--zona-color, #0071e3);
  transition: all 0.22s; cursor: default;
}
.zona-impact-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(6,14,30,0.1); }

.zic-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.zic-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.zic-info { flex: 1; min-width: 0; }
.zic-nombre { display: block; font-weight: 700; font-size: 0.9rem; color: #060e1e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zic-ciudad { display: block; font-size: 0.75rem; color: #8aa3be; margin-top: 2px; }
.zic-badge { background: #f4f8fd; color: #5c7699; font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: 100px; white-space: nowrap; border: 1px solid #e8f0f9; }
.zic-valor { font-size: 1.45rem; font-weight: 800; color: #15803d; letter-spacing: -0.03em; }

.ciudades-impact-wrap { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px 24px; }
.ciudad-impact-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 18px; background: white;
  border: 1.5px solid #e8f0f9; border-radius: 100px;
  font-size: 0.85rem; font-weight: 600; color: #1a2f4a;
  transition: all 0.18s; cursor: default;
}
.ciudad-impact-chip:hover { background: #eff6ff; border-color: #bfdbfe; color: #0071e3; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,88,176,0.15); }

/* ── Mi Perfil ───────────────────────────────────────────── */
.perfil-layout { display: grid; grid-template-columns: 310px 1fr; gap: 22px; align-items: start; }
.perfil-col-left { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 90px; }
.perfil-col-left,
.perfil-col-right,
.perfil-field,
.perfil-section-card,
.perfil-foto-card,
.pf-input-wrap,
.pf-value { min-width: 0; }

.perfil-foto-card {
  background: white; border-radius: 22px;
  border: 1px solid #e8f0f9; padding: 30px 26px 22px;
  text-align: center; box-shadow: 0 2px 8px rgba(6,14,30,0.05);
}
.perfil-foto-wrap { margin-bottom: 20px; }
.perfil-foto-inner {
  width: 128px; height: 128px; border-radius: 50%;
  margin: 0 auto; position: relative;
  background: #f4f8fd;
  border: 3px solid #e8f0f9;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(6,14,30,0.1);
  transition: border-color 0.2s;
}
.perfil-foto-inner:hover { border-color: #0071e3; }
.perfil-foto-placeholder { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.perfil-foto-placeholder span { font-size: 0.7rem; color: #8aa3be; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.perfil-foto-actions { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; }

.btn-foto-upload {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px;
  background: linear-gradient(135deg, #0071e3, #1a5fb4);
  color: white; border-radius: 11px;
  font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: all 0.22s; border: none;
}
.btn-foto-upload:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,88,176,0.4); }

.btn-foto-remove {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; background: white; color: #dc2626;
  border: 1.5px solid #fca5a5; border-radius: 11px;
  font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.btn-foto-remove:hover { background: #fff0f0; }
.perfil-foto-hint { font-size: 0.72rem; color: #8aa3be; letter-spacing: 0.02em; }

/* ── Formulación: zona de foto ────────────────────────── */
.form-foto-zone {
    background: linear-gradient(135deg, #f0f6ff 0%, #f8fafc 100%);
    border: 2px dashed #c5d8ed;
    border-radius: 18px;
    padding: 28px 20px;
    text-align: center;
    transition: all 0.25s ease;
}
.form-foto-zone:hover { border-color: #7fb3e0; background: linear-gradient(135deg, #e8f1ff 0%, #f0f6ff 100%); }
.form-foto-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.form-foto-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    display: flex; align-items: center; justify-content: center;
    color: #6ba3d6;
    box-shadow: 0 4px 12px rgba(59,130,246,0.1);
}
.form-foto-text {
    font-size: 0.85rem; color: #6b8aac; font-weight: 500; margin: 4px 0 6px;
}
.form-foto-btns {
    display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.form-foto-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border-radius: 12px;
    font-size: 0.84rem; font-weight: 650; cursor: pointer;
    transition: all 0.22s ease; border: none; text-decoration: none;
    letter-spacing: -0.01em;
}
.form-foto-btn.primary {
    background: linear-gradient(135deg, #0071e3, #1a5fb4);
    color: white;
    box-shadow: 0 4px 16px rgba(0,88,176,0.3);
}
.form-foto-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,88,176,0.4);
}
.form-foto-btn.secondary {
    background: white;
    color: #1a5fb4;
    border: 1.5px solid #bdd4ee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.form-foto-btn.secondary:hover {
    background: #eef4fb;
    border-color: #93b4d4;
    transform: translateY(-1px);
}
.form-foto-preview {
    position: relative; display: inline-block;
}
.form-foto-preview img {
    max-width: 100%; max-height: 300px; border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12); object-fit: contain;
    border: 3px solid white;
}
.form-foto-remove {
    position: absolute; top: -10px; right: -10px;
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white; border: 3px solid white;
    font-size: 14px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(239,68,68,0.4);
    transition: all 0.2s;
}
.form-foto-remove:hover { transform: scale(1.15); box-shadow: 0 6px 18px rgba(239,68,68,0.5); }

/* ── Formulación: botón grabar audio + reproductor ────── */
.form-foto-btn.record {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    box-shadow: 0 4px 16px rgba(234,88,12,0.3);
}
.form-foto-btn.record:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(234,88,12,0.4);
}
.form-foto-btn.record.recording {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    box-shadow: 0 4px 16px rgba(220,38,38,0.45);
    animation: form-audio-pulse-btn 1.4s ease-in-out infinite;
}
@keyframes form-audio-pulse-btn {
    0%, 100% { box-shadow: 0 4px 16px rgba(220,38,38,0.45); }
    50%      { box-shadow: 0 4px 26px rgba(220,38,38,0.85); }
}
.form-audio-wrap {
    background: linear-gradient(135deg, #fff7ed 0%, #fffbf3 100%);
    border: 2px dashed #fed7aa;
    border-radius: 18px;
    padding: 18px 20px;
}
.form-audio-status {
    display: flex; align-items: center; gap: 12px;
    font-size: 0.92rem; color: #9a3412; font-weight: 600;
}
.form-audio-status.hidden { display: none; }
.form-audio-pulse {
    width: 14px; height: 14px; border-radius: 50%;
    background: #dc2626;
    box-shadow: 0 0 0 0 rgba(220,38,38,0.7);
    animation: form-audio-pulse-dot 1.2s ease-out infinite;
}
@keyframes form-audio-pulse-dot {
    0%   { box-shadow: 0 0 0 0   rgba(220,38,38,0.7); }
    70%  { box-shadow: 0 0 0 14px rgba(220,38,38,0); }
    100% { box-shadow: 0 0 0 0   rgba(220,38,38,0); }
}
.form-audio-status-text { flex: 1; }
.form-audio-timer {
    font-variant-numeric: tabular-nums;
    background: rgba(220,38,38,0.1);
    padding: 4px 10px; border-radius: 8px;
    font-size: 0.85rem; color: #991b1b; font-weight: 700;
}
.form-audio-player {
    display: flex; flex-direction: column; gap: 10px;
}
.form-audio-player.hidden { display: none; }
.form-audio-player audio {
    width: 100%;
    height: 40px;
    border-radius: 12px;
}
.form-audio-meta {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.78rem; color: #9a3412; font-weight: 600;
}
.form-audio-remove {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white; border: 2px solid white;
    font-size: 13px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(239,68,68,0.35);
    transition: all 0.2s;
}
.form-audio-remove:hover { transform: scale(1.1); box-shadow: 0 6px 16px rgba(239,68,68,0.5); }

@media (max-width: 600px) {
    .form-foto-zone { padding: 20px 14px; }
    .form-foto-btn { padding: 10px 16px; font-size: 0.8rem; }
    .form-foto-preview img { max-height: 200px; }
    .form-foto-icon { width: 52px; height: 52px; }
    .form-foto-icon svg { width: 26px; height: 26px; }
    .form-audio-wrap { padding: 14px 14px; }
}

/* ── Camera overlay (fullscreen) ──────────────────────── */
.camera-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: #000; display: flex; align-items: center; justify-content: center;
}
.camera-overlay.hidden { display: none; }
.camera-overlay video {
    width: 100%; height: 100%; object-fit: cover;
}
.camera-top-bar {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
}
.camera-btn-close,
.camera-btn-switch {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.15); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    color: white; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.camera-btn-close:hover,
.camera-btn-switch:hover { background: rgba(255,255,255,0.3); }
.camera-bottom-bar {
    position: absolute; bottom: 0; left: 0; right: 0;
    display: flex; justify-content: center; align-items: center;
    padding: 28px 20px 40px;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
}
.camera-btn-shutter {
    width: 72px; height: 72px; border-radius: 50%;
    background: transparent; border: 4px solid white;
    cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.camera-btn-shutter span {
    display: block; width: 56px; height: 56px; border-radius: 50%;
    background: white; transition: all 0.15s;
}
.camera-btn-shutter:hover span { background: #e5e7eb; }
.camera-btn-shutter:active { transform: scale(0.9); }
.camera-btn-shutter:active span { background: #ef4444; }

/* ── Estado Formulación: filtros y gráfica ────────────── */
.form-chart-filters {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid #eef2f7;
    align-items: end;
}
.form-chart-filter-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-chart-filter-item label {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: #8aa3be;
}
.form-chart-filter-item input,
.form-chart-filter-item select {
    padding: 10px 12px; border-radius: 10px;
    border: 1.5px solid #dbe4f0; background: #f8fafc;
    font-size: 0.86rem; color: #1a2f4a;
    font-family: inherit; outline: none; transition: all 0.18s;
    width: 100%;
}
.form-chart-filter-item input:focus,
.form-chart-filter-item select:focus {
    border-color: #0071e3; background: white;
    box-shadow: 0 0 0 3px rgba(0,113,227,0.12);
}
.form-chart-filter-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-form-chart {
    padding: 10px 18px; border-radius: 10px;
    font-size: 0.82rem; font-weight: 650; cursor: pointer;
    transition: all 0.2s; border: none; white-space: nowrap;
}
.btn-form-chart.primary {
    background: linear-gradient(135deg, #0071e3, #1a5fb4); color: white;
    box-shadow: 0 4px 14px rgba(0,88,176,0.3);
}
.btn-form-chart.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,88,176,0.4); }
.btn-form-chart.secondary {
    background: white; color: #64748b; border: 1.5px solid #dbe4f0;
}
.btn-form-chart.secondary:hover { background: #f1f5f9; border-color: #cbd5e1; }

.form-chart-wrap {
    position: relative;
    padding: 24px;
    min-height: 340px;
}
.form-chart-wrap canvas {
    max-width: 100%;
    max-height: 420px;
}
.form-chart-empty {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; color: #8aa3be;
    background: #fafbfd;
}
.form-chart-empty.hidden { display: none; }
.form-chart-empty p { font-size: 0.88rem; margin: 0; }

@media (max-width: 768px) {
    .form-chart-filters {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 16px 18px;
    }
    .form-chart-filter-buttons {
        grid-column: 1 / -1;
        justify-content: stretch;
    }
    .btn-form-chart { flex: 1; padding: 11px 14px; }
    .form-chart-wrap { padding: 16px 12px; min-height: 280px; }
    .form-chart-wrap canvas { max-height: 320px; }
}
@media (max-width: 480px) {
    .form-chart-filters { grid-template-columns: 1fr; }
}

.perfil-consig-card {
  background: white; border-radius: 22px;
  border: 1px solid #e8f0f9; overflow: hidden;
  box-shadow: 0 2px 8px rgba(6,14,30,0.05);
}
.consig-card-header {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px;
  background: linear-gradient(150deg, #020d1f 0%, #061830 100%);
}
.consig-header-icon { font-size: 1.35rem; }
.consig-card-header h4 { color: white; font-size: 0.93rem; font-weight: 700; margin: 0 0 3px; }
.consig-card-header p  { color: rgba(255,255,255,0.35); font-size: 0.74rem; margin: 0; }
.consig-card-body { padding: 18px 20px; }

.consig-empty-state { text-align: center; padding: 24px 16px; }
.consig-empty-state svg { opacity: 0.35; margin-bottom: 10px; }
.consig-empty-state p { color: #8aa3be; font-size: 0.82rem; line-height: 1.6; margin: 0; }

.consig-empty { color: #8aa3be; font-size: 0.82rem; padding: 12px 0; text-align: center; }
#perfilConsigContainer { padding: 16px 18px 18px; }
.consig-grupo { margin-bottom: 14px; }
.consig-grupo:last-child { margin-bottom: 0; }
.consig-ciudad-header {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: #1a3c6e; background: #eef4ff; border-radius: 6px;
  padding: 5px 10px; margin-bottom: 6px;
}
.consig-card {
  background: #f8faff; border: 1px solid #e8f0f9; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px;
}
.consig-card:last-child { margin-bottom: 0; }
.consig-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; }
.consig-row + .consig-row { border-top: 1px solid #edf2fa; }
.consig-label { font-size: 0.78rem; color: #8aa3be; font-weight: 500; }
.consig-value { font-size: 0.83rem; color: #1a2e4a; font-weight: 600; text-align: right; max-width: 60%; word-break: break-word; }

.consig-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 0; }
.consig-fila:first-child { padding-top: 0; }
.consig-fila + .consig-fila { border-top: 1px solid #f4f8fd; }
.consig-fila-item { background: #f8faff; border: 1px solid #e8f0f9; border-radius: 11px; padding: 12px 14px; }
.consig-fila-item.full-width { grid-column: 1 / -1; }
.consig-data-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #8aa3be; margin-bottom: 5px; }
.consig-data-value { font-size: 0.88rem; font-weight: 600; color: #060e1e; }
.consig-data-value.banco { font-size: 0.93rem; font-weight: 700; }
.cuenta-num { font-family: 'Courier New', monospace; font-size: 0.97rem; font-weight: 700; color: #060e1e; letter-spacing: 0.08em; }

/* Perfil right col */
.perfil-col-right { display: flex; flex-direction: column; gap: 18px; }
.perfil-section-card {
  background: white; border-radius: 22px;
  border: 1px solid #e8f0f9; overflow: hidden;
  box-shadow: 0 2px 8px rgba(6,14,30,0.05);
}
.perfil-section-header {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 26px; border-bottom: 1px solid #f4f8fd;
  background: linear-gradient(135deg, #f8faff 0%, white 100%);
}
.perfil-section-icon {
  width: 44px; height: 44px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.icon-blue   { background: #eff6ff; color: #0071e3; border: 1px solid #bfdbfe; }
.icon-green  { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.icon-orange { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.perfil-section-header h3 { font-size: 1rem; font-weight: 700; color: #060e1e; margin: 0 0 3px; }
.perfil-section-header p  { font-size: 0.77rem; color: #8aa3be; margin: 0; }

.perfil-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 22px 26px; }

.perfil-field label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #8aa3be; display: block; margin-bottom: 8px; }

.pf-value {
  padding: 12px 15px; background: #f8faff;
  border: 1.5px solid #e8f0f9; border-radius: 12px;
  font-size: 0.9rem; color: #1a2f4a; font-weight: 500;
  min-height: 44px; display: flex; align-items: center;
}

.pf-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px; background: #f8faff;
  border: 1.5px solid #e8f0f9; border-radius: 12px;
  transition: all 0.22s;
}
.pf-input-wrap:focus-within { border-color: #0071e3; background: white; box-shadow: 0 0 0 3px rgba(0,113,227,0.15); }
.pf-input-wrap input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 0.9rem; color: #1a2f4a; }
.pf-input-wrap input::placeholder { color: #8aa3be; }

.pf-editable-tag {
  background: #eff6ff; color: #0071e3;
  font-size: 0.65rem; font-weight: 700;
  padding: 2px 9px; border-radius: 100px;
  letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap; border: 1px solid #bfdbfe;
}

.perfil-actions { padding: 0 26px 22px; }

.btn-perfil-save {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  background: linear-gradient(135deg, #0071e3, #1a5fb4);
  color: white; border: none; border-radius: 12px;
  font-family: inherit; font-size: 0.88rem; font-weight: 600;
  cursor: pointer; transition: all 0.22s;
}
.btn-perfil-save:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,88,176,0.4); }

.btn-secondary-save {
  background: linear-gradient(135deg, #374151, #1f2937) !important;
}
.btn-secondary-save:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.25) !important; }

.perfilPassAlert, #perfilUpdateAlert { margin: 0 26px 8px; }

/* ── Responsive legacy (superseded by blocks at bottom) ─── */

/* ════════════════════════════════════════════════════════════
   MÓDULO 5: MI CONCURSO — Leaderboard
   ════════════════════════════════════════════════════════════ */
.concurso-wrap-v2 { max-width: 1100px; margin: 0 auto; }

/* ── Hero ── */
.concurso-hero-v2 {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(150deg, #0c0a1d 0%, #1a1145 50%, #2d1b69 100%);
  border-radius: 22px; padding: 26px 32px; margin-bottom: 22px;
  position: relative; overflow: hidden;
  box-shadow: 0 12px 40px rgba(12,10,29,0.4);
}
.concurso-hero-v2::before {
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events:none;
}
.ch2-left { display:flex; align-items:center; gap:18px; position:relative; z-index:1; }
.ch2-trophy { font-size:2.8rem; line-height:1; }
.ch2-info h2 { color:#fff; font-size:1.35rem; font-weight:700; margin:0 0 4px; }
.ch2-subtitle { color:rgba(255,255,255,0.45); font-size:0.85rem; margin:0; }
.ch2-badge-live {
  display:flex; align-items:center; gap:7px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
  padding:6px 14px; border-radius:100px;
  color:#4ade80; font-size:0.72rem; font-weight:700;
  letter-spacing:0.08em; position:relative; z-index:1;
}
.ch2-live-dot {
  width:8px; height:8px; background:#4ade80; border-radius:50%;
  box-shadow:0 0 8px #4ade80;
  animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

/* ── Summary Cards ── */
.concurso-summary-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px;
}
.cs-card {
  background:#fff; border-radius:18px; padding:22px 20px;
  border:1px solid #e8f0f9; position:relative; overflow:hidden;
  box-shadow:0 2px 8px rgba(6,14,30,0.05); transition:all 0.24s;
}
.cs-card:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(6,14,30,0.1); }
.cs-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:18px 18px 0 0;
}
.cs-posicion::before  { background:linear-gradient(90deg,#d97706,#fbbf24); }
.cs-meta::before      { background:linear-gradient(90deg,#0071e3,#38bdf8); }
.cs-facturado::before { background:linear-gradient(90deg,#16a34a,#4ade80); }
.cs-cumplimiento::before { background:linear-gradient(90deg,#7c3aed,#a78bfa); }
.cs-total-general::before { background:linear-gradient(90deg,#0f766e,#14b8a6); }
.cs-ideal-tiempo::before { background:linear-gradient(90deg,#0369a1,#38bdf8); }
.cs-ideal::before { background:linear-gradient(90deg,#9333ea,#c084fc); }
.cs-avance-ideal::before { background:linear-gradient(90deg,#be185d,#ec4899); }

/* Banner de estado (ganando / atrás) */
.cs-estado-banner {
  display:flex; align-items:center; gap:16px;
  padding:18px 22px; border-radius:16px; margin-bottom:18px;
  box-shadow:0 4px 14px rgba(6,14,30,0.06);
}
.cs-estado-banner.ganando {
  background:linear-gradient(135deg,#ecfdf5,#d1fae5); border:1.5px solid #10b981;
}
.cs-estado-banner.atras {
  background:linear-gradient(135deg,#fef2f2,#fee2e2); border:1.5px solid #ef4444;
}
.cs-estado-icon { font-size:2rem; flex-shrink:0; }
.cs-estado-banner strong { display:block; font-size:1.05rem; color:#0f172a; margin-bottom:4px; }
.cs-estado-banner span { display:block; font-size:0.85rem; color:#334155; line-height:1.5; }
.cs-estado-banner b { color:#0f172a; font-weight:800; }
.cs-card-icon { font-size:1.5rem; margin-bottom:10px; }
.cs-card-label { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#8aa3be; margin-bottom:6px; }
.cs-card-value { font-size:1.8rem; font-weight:800; color:#060e1e; letter-spacing:-0.04em; line-height:1; margin-bottom:6px; }
.cs-card-sub { font-size:0.75rem; color:#8aa3be; }
.cs-progress-bar { width:100%; height:6px; background:#f1f5f9; border-radius:100px; overflow:hidden; margin-top:8px; }
.cs-progress-fill { height:100%; border-radius:100px; transition:width 0.6s ease; }

/* No participa */
.concurso-no-participa {
  text-align:center; padding:60px 24px;
}
.cnp-icon { font-size:3.5rem; margin-bottom:18px; opacity:.5; }
.concurso-no-participa h3 { font-size:1.2rem; font-weight:700; color:#1e293b; margin:0 0 10px; }
.concurso-no-participa p  { color:#64748b; font-size:0.93rem; line-height:1.6; max-width:440px; margin:0 auto; }

/* ── Responsive Concurso ── */
@media (max-width:1024px) {
  .concurso-summary-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .concurso-hero-v2 { flex-direction:column; text-align:center; padding:22px 20px; gap:14px; }
  .ch2-left { flex-direction:column; }
  .concurso-summary-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .cs-card-value { font-size:1.4rem; }
  .cs-estado-banner { padding:14px 16px; gap:12px; }
  .cs-estado-icon { font-size:1.5rem; }
  .cs-estado-banner strong { font-size:0.95rem; }
  .cs-estado-banner span { font-size:0.78rem; }
}
@media (max-width:480px) {
  .concurso-summary-grid { grid-template-columns:1fr; }
  .concurso-wrap-v2 { padding:0 4px; }
}

/* ════════════════════════════════════════════════════════════
   MÓDULO 6: MIS ENTREGAS
   ════════════════════════════════════════════════════════════ */
.ent-wrap { max-width:1100px; margin:0 auto; }
.ent-summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:22px; }

.ent-section {
  background:#fff; border-radius:22px; border:1px solid #e8f0f9;
  overflow:hidden; box-shadow:0 2px 12px rgba(6,14,30,0.06);
}
.ent-section-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; border-bottom:1px solid #f4f8fd;
  background:linear-gradient(135deg,#f8faff,#fff);
}
.ent-section-header .lb-header-left { display:flex; align-items:center; gap:10px; }
.ent-section-header .lb-header-icon { font-size:1.1rem; }
.ent-section-header h3 { font-size:0.97rem; font-weight:700; color:#060e1e; margin:0; }
.ent-section-header .lb-count {
  background:#eff6ff; color:#1a5fb4; font-size:0.7rem; font-weight:700;
  padding:4px 12px; border-radius:100px; border:1px solid #bfdbfe;
}

.ent-cards-list { padding:16px 20px; display:flex; flex-direction:column; gap:14px; }

.ent-card {
  background:#fafbff; border:1px solid #e8f0f9; border-radius:16px;
  overflow:hidden; transition:box-shadow 0.2s;
}
.ent-card:hover { box-shadow:0 6px 20px rgba(6,14,30,0.08); }

.ent-card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; background:#fff; border-bottom:1px solid #f4f8fd;
}
.ent-fecha-wrap { display:flex; align-items:baseline; gap:10px; }
.ent-fecha { font-weight:700; font-size:0.95rem; color:#060e1e; }
.ent-hora { font-size:0.8rem; color:#8aa3be; }
.ent-corte-badge {
  background:#eff6ff; color:#1a5fb4; font-size:0.7rem; font-weight:700;
  padding:4px 12px; border-radius:100px; border:1px solid #bfdbfe;
  letter-spacing:0.04em; text-transform:uppercase;
}

.ent-card-body { padding:16px 20px; }

.ent-datos-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:14px;
}
.ent-dato { display:flex; flex-direction:column; gap:4px; }
.ent-dato-label { font-size:0.72rem; font-weight:600; color:#8aa3be; }
.ent-dato-value { font-size:0.9rem; font-weight:600; color:#1a2f4a; }
.ent-valor { color:#15803d; font-weight:700; font-size:1rem; }

.ent-gps-link {
  color:#0071e3; font-size:0.82rem; font-weight:600; text-decoration:none;
  transition:color 0.2s;
}
.ent-gps-link:hover { color:#1a5fb4; text-decoration:underline; }
.ent-gps-na { color:#8aa3be; font-size:0.82rem; }

.ent-action-btn {
  border:none; border-radius:8px; padding:6px 14px; cursor:pointer;
  font-family:inherit; font-size:0.8rem; font-weight:600; transition:all 0.2s;
}
.ent-gps-btn   { background:#eff6ff; color:#1a5fb4; border:1px solid #bfdbfe; }
.ent-gps-btn:hover { background:#dbeafe; transform:translateY(-1px); }
.ent-firma-btn { background:#f0fdf4; color:#16a34a; border:1px solid #bbf7d0; }
.ent-firma-btn:hover { background:#dcfce7; transform:translateY(-1px); }
.ent-sin-dato { color:#8aa3be; font-size:0.82rem; font-style:italic; }

/* ── Firma preview en tarjeta de gestión ── */
.ent-firmado-meta {
  display:flex; align-items:center; gap:10px; padding-top:10px; flex-wrap:wrap;
}
.ent-firmado-badge {
  background:#dcfce7; color:#166534;
  padding:3px 12px; border-radius:99px; font-size:11px; font-weight:700;
}
.ent-firmado-date { font-size:12px; color:#6b7280; }
.ent-firma-preview {
  margin-top:12px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:12px 14px;
}
.ent-firma-label {
  font-size:11px; font-weight:600; color:#8aa3be;
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px;
}
.ent-firma-img {
  display:block;
  max-width:100%;
  max-height:100px;
  border-radius:6px;
  background:#fff;
}

/* ── Modales Entregas ── */
.ent-modal-overlay {
  position:fixed; inset:0; background:rgba(6,14,30,0.55);
  backdrop-filter:blur(4px); z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.ent-modal-overlay.hidden { display:none; }
.ent-modal-box {
  background:#fff; border-radius:24px; width:100%; max-width:600px;
  box-shadow:0 24px 60px rgba(6,14,30,0.25); overflow:hidden;
  animation: modalIn 0.25s ease;
}
@keyframes modalIn { from{opacity:0;transform:scale(0.96) translateY(10px);} to{opacity:1;transform:scale(1) translateY(0);} }
.ent-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; border-bottom:1px solid #f4f8fd;
  background:linear-gradient(135deg,#f8faff,#fff);
}
.ent-modal-title { font-size:1rem; font-weight:700; color:#060e1e; }
.ent-modal-close {
  background:none; border:none; font-size:1.1rem; cursor:pointer;
  color:#8aa3be; width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; transition:all 0.2s;
}
.ent-modal-close:hover { background:#f4f8fd; color:#060e1e; }
.ent-modal-body { padding:20px 24px; }

/* GPS modal */
.gps-coords-row { display:flex; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
.gps-coord-item {
  background:#f8faff; border:1px solid #e8f0f9; border-radius:10px;
  padding:8px 14px; font-size:0.85rem; color:#1a2f4a;
}
.gps-map-wrap { margin-bottom:14px; border-radius:12px; overflow:hidden; }
.gps-open-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,#0071e3,#1a5fb4);
  color:#fff; text-decoration:none; padding:10px 20px;
  border-radius:12px; font-size:0.88rem; font-weight:600; transition:all 0.2s;
}
.gps-open-btn:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,88,176,0.4); }

/* Firma modal */
.firma-loading { display:flex; flex-direction:column; align-items:center; gap:12px; padding:30px; }
.firma-canvas-wrap {
  background:#f8faff; border:1px solid #e8f0f9; border-radius:12px;
  padding:12px; display:flex; justify-content:center;
}
.firma-canvas-wrap.hidden { display:none; }
#firmaCanvas { border-radius:8px; max-width:100%; }
.firma-error { background:#fff0f0; border:1px solid #fca5a5; border-radius:10px; padding:14px; color:#dc2626; font-size:0.88rem; }
.firma-error.hidden { display:none; }

.ent-obs {
  background:#fffbeb; border:1px solid #fde68a; border-radius:10px;
  padding:10px 14px; font-size:0.85rem; color:#92400e; line-height:1.5;
}
.ent-obs-label { font-weight:700; }

.ent-imagen-wrap {
  margin: 12px 0;
  background: #f8faff;
  border: 1px solid #e8f0f9;
  border-radius: 12px;
  padding: 8px;
}
.ent-imagen {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 8px;
}

@media (max-width:768px) {
  .ent-summary-grid { grid-template-columns:1fr; }
  .ent-datos-grid { grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:480px) {
  .ent-datos-grid { grid-template-columns:1fr; }
  .ent-cards-list { padding:12px; }
}

@media (max-width: 992px) {
  .results-section { padding-left: 0; padding-right: 0; }
  .profile-card { padding: 24px 22px; }
  .profile-details { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .zona-grid { grid-template-columns: 1fr; padding: 16px; }
  .zona-impact-card { padding: 16px 18px; }
  .zonas-impact-header { padding: 22px 22px; gap: 20px; flex-wrap: wrap; }
  .perfil-layout { grid-template-columns: 1fr; gap: 16px; }
  .perfil-col-left { position: static; }
  .perfil-foto-card,
  .perfil-consig-card,
  .perfil-section-card { border-radius: 18px; }
  .perfil-fields-grid { grid-template-columns: 1fr 1fr; padding: 18px 20px; }
  .zona-chart-container, .zona-table-wrap { min-width: 0; }
  .zona-resumen-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .zona-resumen-table { min-width: 0; width: 100%; }
  .concurso-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .concurso-hero-v2 { flex-direction: column; text-align: center; gap: 14px; }
  .ch2-left { flex-direction: column; }
}

@media (max-width: 768px) {
  #modulePerfil .results-section {
    max-width: 100%;
    overflow-x: hidden;
    padding-top: 2px;
  }

  .perfil-layout {
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
  }

  .perfil-col-left,
  .perfil-col-right {
    width: 100%;
  }

  .loading,
  .no-results,
  .modulo-empty-state {
    padding: 56px 20px;
  }

  .section-card,
  .profile-card,
  .stat-card,
  .zona-card,
  .zona-impact-card,
  .perfil-foto-card,
  .perfil-consig-card,
  .perfil-section-card,
  .concurso-hero-v2,
  .cs-card {
    border-radius: 18px;
  }

  .section-header {
    padding: 16px 18px 14px;
    flex-wrap: wrap;
  }

  .perfil-foto-card {
    padding: 22px 18px 18px;
  }

  .perfil-foto-wrap {
    margin-bottom: 14px;
  }

  .perfil-foto-inner {
    width: 108px;
    height: 108px;
    border-width: 2px;
    box-shadow: 0 8px 20px rgba(6,14,30,0.08);
  }

  .perfil-foto-placeholder span {
    font-size: 0.66rem;
    letter-spacing: 0.05em;
  }

  .perfil-foto-actions {
    margin-bottom: 8px;
  }

  .btn-foto-upload,
  .btn-foto-remove {
    min-height: 42px;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.78rem;
  }

  .perfil-foto-hint {
    font-size: 0.69rem;
  }

  .profile-header {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }

  /* Stats mantienen 2 columnas en tablet/mobile grande */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* En tablet la 3ra tarjeta ocupa ancho completo */
  .stat-card.total {
    grid-column: 1 / -1;
  }

  .stat-card {
    padding: 18px 16px;
  }

  .stat-icon {
    font-size: 1.35rem;
    margin-bottom: 10px;
  }

  .stat-card h3 {
    font-size: 0.68rem;
    margin-bottom: 6px;
  }

  .stat-card .number {
    font-size: 1.7rem;
  }

  /* Profile details en 2 cols en móvil */
  .profile-details {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .zonas-impact-grid,
  .concurso-summary-grid {
    grid-template-columns: 1fr;
  }

  .profile-card,
  .zona-card-header,
  .zona-card-body,
  .zona-impact-card,
  .perfil-fields-grid,
  .perfil-section-header,
  .perfil-actions {
    padding-left: 18px;
    padding-right: 18px;
  }

  #perfilConsigContainer {
    padding: 14px 16px 16px;
  }

  .perfil-section-header {
    align-items: flex-start;
    gap: 12px;
  }

  .perfil-section-header > div:last-child {
    flex: 1;
    min-width: 0;
  }

  .perfil-section-header h3,
  .perfil-section-header p {
    overflow-wrap: anywhere;
  }

  .perfil-fields-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .pf-value {
    width: 100%;
  }

  .pf-input-wrap {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 8px 10px;
    align-items: center;
    padding: 12px 14px;
  }

  .pf-input-wrap input,
  .pf-input-wrap select {
    min-width: 0;
    width: 100%;
  }

  .pf-editable-tag {
    grid-column: 1 / -1;
    justify-self: flex-start;
    margin-left: 30px;
  }

  .consig-card {
    padding: 13px 14px;
    border-radius: 14px;
  }

  .consig-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 0;
  }

  .consig-value {
    max-width: 100%;
    text-align: left;
  }

  .zona-stats-row,
  .consig-fila {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  /* Móvil: volver a layout vertical en carta de zona */
  .zona-card-body {
    flex-direction: column;
  }
  .zona-chart-container { width: 100%; min-width: 0; }
  .zona-table-wrap {
    width: 100%; min-width: 0; max-height: 260px !important;
    overflow-x: auto; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .zona-resumen-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .zona-resumen-table { min-width: 0; width: 100%; }
  .zona-resumen-table th,
  .zona-resumen-table td { padding: 11px 14px; font-size: 0.84rem; }
  .zona-table { min-width: 0; width: 100%; }

  .ciudades-impact-wrap {
    padding: 18px;
  }

  .concurso-summary-grid {
    gap: 12px;
  }

  .concurso-no-participa,
  .vis-empty {
    padding: 42px 18px;
  }
}

@media (max-width: 480px) {
  .results-section {
    padding-top: 2px;
  }

  #modulePerfil .results-section {
    padding-left: 0;
    padding-right: 0;
  }

  .perfil-layout {
    gap: 12px;
  }
  /* Stats: 2 cols en móvil, la tarjeta "total" ocupa todo el ancho */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .stat-card.total {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
  }

  .stat-card.total .stat-icon { margin-bottom: 0; font-size: 1.4rem; }
  .stat-card.total h3 { margin-bottom: 2px; }
  .stat-card.total .number { font-size: 1.55rem; }

  .stat-card {
    padding: 14px 12px;
  }

  .stat-icon {
    font-size: 1.2rem;
    margin-bottom: 8px;
  }

  .stat-card .number {
    font-size: 1.5rem;
  }

  /* Profile details en 1 col en móvil pequeño */
  .profile-details {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .perfil-fields-grid,
  .concurso-summary-grid,
  .zonas-impact-grid {
    grid-template-columns: 1fr;
  }

  .perfil-foto-card,
  .perfil-section-card {
    border-radius: 16px;
  }

  .perfil-foto-card {
    padding: 18px 14px 14px;
    text-align: center;
  }

  .perfil-foto-inner {
    width: 92px;
    height: 92px;
  }

  .perfil-section-header {
    padding: 14px 14px 12px;
    gap: 10px;
  }

  .perfil-section-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .perfil-section-header h3 {
    font-size: 0.92rem;
    margin-bottom: 2px;
  }

  .perfil-section-header p {
    font-size: 0.74rem;
    line-height: 1.35;
  }

  .perfil-fields-grid {
    padding: 14px;
    gap: 10px;
  }

  .perfil-actions {
    padding: 0 14px 14px;
  }

  .btn-perfil-save {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    border-radius: 12px;
  }

  #perfilConsigContainer {
    padding: 12px 14px 14px;
  }

  .consig-ciudad-header {
    font-size: 0.68rem;
    padding: 6px 10px;
    border-radius: 10px;
  }

  .consig-card {
    padding: 12px 13px;
  }

  .consig-label {
    font-size: 0.72rem;
  }

  .consig-value {
    font-size: 0.82rem;
  }

  .pf-input-wrap {
    padding: 11px 12px;
  }

  .pf-editable-tag {
    margin-left: 0;
  }

  .profile-card {
    padding: 18px 14px 14px;
    border-radius: 16px;
  }

  .profile-card::after {
    display: none;
  }

  .profile-header {
    gap: 12px;
    margin-bottom: 14px;
  }

  .profile-avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 1.4rem;
  }

  .profile-info {
    width: 100%;
    min-width: 0;
  }

  .profile-info h2 {
    font-size: clamp(1rem, 4.4vw, 1.12rem);
    line-height: 1.12;
    max-width: 100%;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
  }

  .profile-info p {
    font-size: 0.76rem;
    line-height: 1.35;
    word-break: break-word;
  }

  .detail-item {
    padding: 10px 12px;
    border-radius: 12px;
  }

  .detail-item .label {
    margin-bottom: 6px;
    font-size: 0.62rem;
  }

  .detail-item .value {
    font-size: 0.82rem;
  }

  .tag {
    font-size: 0.68rem;
    padding: 3px 8px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .stat-card {
    padding: 16px 14px;
  }

  .stat-card .number {
    font-size: 1.7rem;
  }

  .section-header {
    padding: 14px 16px 12px;
  }

  .zona-grid,
  .zonas-impact-grid {
    padding: 12px;
  }

  .section-card {
    border-radius: 16px;
  }

  .section-header {
    gap: 8px;
  }

  .section-header h3 {
    font-size: 0.92rem;
  }

  .section-badge {
    padding: 3px 9px;
    font-size: 0.65rem;
  }
  .form-status-summary,
  .form-status-cards,
  .form-status-table-wrap {
    padding-left: 18px;
    padding-right: 18px;
  }
  .form-status-summary {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 16px;
  }
  .form-status-kpi {
    border-radius: 14px;
    padding: 12px 14px;
  }
  .form-status-kpi-value {
    font-size: 1.3rem;
  }
  .form-status-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .form-status-item {
    border-radius: 16px;
    padding: 14px;
  }
  .form-status-item-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .form-status-item-comment {
    font-size: 0.82rem;
  }
  .form-status-table-wrap {
    display: none;
  }

  .zona-card-body {
    padding: 14px 16px 18px;
  }

  .zona-resumen-table-wrap {
    border-radius: 12px;
    overflow-x: auto;
  }

  .zona-resumen-table { min-width: 0; width: 100%; }
  .zona-table { min-width: 0; width: 100%; }

  .zona-resumen-table th,
  .zona-resumen-table td {
    padding: 10px 10px;
    font-size: 0.8rem;
  }

  /* Ocultar columna "Prod. Únicos" en pantallas muy pequeñas */
  .zona-resumen-table th:nth-child(2),
  .zona-resumen-table td:nth-child(2) {
    display: none;
  }

  .zona-resumen-nombre {
    align-items: flex-start;
    gap: 8px;
    font-size: 0.86rem;
  }

  .zona-resumen-ciudad {
    padding-left: 16px;
  }

  .badge-productos {
    font-size: 0.7rem;
    padding: 3px 9px;
  }

  .concurso-hero-v2 {
    padding: 20px 16px;
  }

  .cs-card {
    padding: 18px 16px;
  }

  .cs-card-value {
    font-size: 1.45rem;
  }

  .no-results,
  .modulo-empty-state,
  .loading {
    padding-left: 16px;
    padding-right: 16px;
  }

  .results-section {
    padding-top: 0;
  }

  .ent-modal-box {
    border-radius: 20px 20px 0 0;
  }

  .ent-modal-header,
  .ent-modal-body {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 420px) {
  .profile-card {
    padding: 14px 12px 12px;
  }

  .profile-header {
    gap: 10px;
    margin-bottom: 12px;
  }

  .profile-avatar {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    font-size: 1.25rem;
  }

  .profile-info h2 {
    font-size: 0.98rem;
  }

  .profile-info p {
    font-size: 0.72rem;
  }

  .profile-details {
    grid-template-columns: 1fr;
  }

  .detail-item {
    padding: 9px 10px;
  }

  .section-card {
    border-radius: 14px;
  }

  .section-header {
    padding: 12px 14px 10px;
  }

  .section-header h3 {
    font-size: 0.88rem;
  }

  .stat-card .number {
    font-size: 1.4rem;
  }

  .zona-resumen-table { min-width: 0; width: 100%; }
  .zona-resumen-table th,
  .zona-resumen-table td { padding: 9px 8px; font-size: 0.78rem; }
  .zona-table { min-width: 0; width: 100%; }
}

/* ─────────────────────────────────────────────────────────────
   TABLÓN — feed estilo canal de Telegram (responsive)
   ───────────────────────────────────────────────────────────── */
.tablon-container {
    background: linear-gradient(135deg, #f7f9fc 0%, #eef3f9 100%);
    border-radius: clamp(14px, 2vw, 22px);
    padding: clamp(12px, 2.2vw, 22px);
    margin-bottom: clamp(16px, 2.5vw, 28px);
    border: 1px solid #e3e8ef;
    width: 100%; max-width: 100%;
    box-sizing: border-box;
}
.tablon-channel-header {
    display: flex; align-items: center; gap: clamp(10px, 1.5vw, 14px);
    padding: 4px 2px clamp(12px, 1.6vw, 16px);
    border-bottom: 1px solid #e3e8ef;
    margin-bottom: clamp(12px, 1.6vw, 16px);
    flex-wrap: wrap;
}
.tablon-avatar {
    width: clamp(38px, 5vw, 48px); height: clamp(38px, 5vw, 48px);
    border-radius: 50%;
    background: linear-gradient(135deg, #0071e3, #1a5fb4);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: clamp(18px, 2.4vw, 22px);
    box-shadow: 0 4px 14px rgba(0,113,227,0.25);
    flex-shrink: 0;
}
.tablon-channel-info { min-width: 0; flex: 1; }
.tablon-channel-info h3 {
    margin: 0;
    font-size: clamp(0.92rem, 1.4vw, 1.05rem);
    font-weight: 700;
    color: #0b1d2e; letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tablon-channel-info p {
    margin: 2px 0 0;
    font-size: clamp(0.7rem, 1.05vw, 0.8rem);
    color: #6b8aac;
}

.tablon-loading {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; padding: 28px; color: #6b8aac; font-size: 0.9rem;
}
.tablon-spinner {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid #cfd8e3;
    border-top-color: #0071e3;
    animation: tablon-spin 0.7s linear infinite;
}
@keyframes tablon-spin { to { transform: rotate(360deg); } }
.tablon-empty {
    text-align: center; padding: 36px 20px; color: #6b8aac;
}
.tablon-empty span { font-size: 36px; display: block; margin-bottom: 8px; }
.tablon-empty p { margin: 0; font-size: 0.9rem; }

.tablon-counter {
    margin-left: auto;
    font-size: clamp(0.7rem, 1.05vw, 0.8rem);
    color: #6b8aac; font-weight: 600;
    background: #fff; border: 1px solid #e3e8ef;
    padding: 4px clamp(8px, 1.2vw, 12px);
    border-radius: 999px;
    flex-shrink: 0;
}

.tablon-carousel {
    position: relative;
    display: flex; align-items: stretch;
    gap: clamp(4px, 1vw, 10px);
}
.tablon-viewport {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden;
    border-radius: clamp(12px, 1.6vw, 16px);
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y;
}
.tablon-track {
    display: flex;
    width: 100%;
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}
.tablon-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
}
.tablon-card {
    background: #fff;
    border-radius: clamp(12px, 1.6vw, 16px);
    padding: clamp(12px, 1.8vw, 16px);
    box-shadow: 0 2px 10px rgba(6,14,30,0.05);
    border: 1px solid #e9eef5;
    transition: box-shadow .2s ease;
    height: 100%;
    box-sizing: border-box;
}
.tablon-card:hover { box-shadow: 0 6px 22px rgba(6,14,30,0.08); }

.tablon-nav {
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid #e3e8ef;
    color: #1a5fb4;
    border-radius: 50%;
    width: clamp(30px, 4.5vw, 40px);
    height: clamp(30px, 4.5vw, 40px);
    align-self: center;
    cursor: pointer;
    font-size: clamp(18px, 2.6vw, 22px);
    font-weight: 700;
    line-height: 1; padding: 0;
    box-shadow: 0 2px 10px rgba(6,14,30,0.08);
    transition: all .15s ease;
    display: flex; align-items: center; justify-content: center;
}
.tablon-nav:hover {
    background: #0071e3; color: #fff; border-color: #0071e3;
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(0,113,227,0.3);
}
.tablon-nav:active { transform: scale(0.96); }

.tablon-dots {
    display: flex; justify-content: center; gap: 6px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.tablon-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #c5d8ed; border: none; padding: 0;
    cursor: pointer;
    transition: all .25s ease;
}
.tablon-dot:hover { background: #93b4d4; transform: scale(1.2); }
.tablon-dot.active {
    background: #0071e3;
    width: 24px; border-radius: 999px;
}

.tablon-card-header {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; margin-bottom: 10px;
}
.tablon-tipo-badge {
    font-size: 0.72rem; font-weight: 700; padding: 4px 10px;
    border-radius: 999px; background: #eef2f6; color: #4b6580;
    letter-spacing: -0.01em;
}
.tablon-card.tipo-estrella .tablon-tipo-badge {
    background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e;
}
.tablon-card.tipo-recomendado .tablon-tipo-badge {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #166534;
}
.tablon-card.tipo-encuesta .tablon-tipo-badge {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af;
}
.tablon-card.tipo-anuncio .tablon-tipo-badge {
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff); color: #6b21a8;
}
.tablon-card.tipo-webinar .tablon-tipo-badge {
    background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b;
}
.tablon-pinned-badge {
    font-size: 0.7rem; font-weight: 600;
    color: #b45309; background: #fef3c7;
    padding: 3px 9px; border-radius: 999px;
}
.tablon-fecha {
    margin-left: auto; font-size: 0.72rem; color: #8aa3be;
    font-weight: 500;
}

.tablon-img-wrap {
    display: block;
    margin: 6px calc(-1 * clamp(12px, 1.8vw, 16px)) 12px;
    background: linear-gradient(135deg, #f0f6ff 0%, #e8f1ff 100%);
    overflow: hidden;
    cursor: zoom-in;
    text-align: center;
    border-top: 1px solid #e9eef5;
    border-bottom: 1px solid #e9eef5;
}
.tablon-img-wrap img {
    width: 100%;
    max-height: clamp(220px, 50vw, 480px);
    object-fit: contain;
    display: block;
    margin: 0 auto;
    transition: transform .25s ease;
    background: transparent;
}
.tablon-img-wrap:hover img { transform: scale(1.02); }

.tablon-titulo {
    margin: 4px 0 8px;
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
    font-weight: 700;
    color: #0b1d2e; line-height: 1.35; letter-spacing: -0.01em;
    word-break: break-word;
}
.tablon-content {
    font-size: clamp(0.85rem, 1.3vw, 0.95rem);
    color: #2c4359; line-height: 1.55;
    word-break: break-word;
}
.tablon-content p { margin: 0 0 6px; }
.tablon-content ul {
    margin: 6px 0 8px; padding-left: 0; list-style: none;
}
.tablon-content li {
    position: relative; padding: 2px 0 2px 22px;
    font-size: 0.92rem; line-height: 1.5;
}
.tablon-content li::before {
    content: '☀'; position: absolute; left: 0; top: 2px;
    color: #f59e0b; font-size: 0.95rem;
}
.tablon-content strong { color: #0b1d2e; font-weight: 700; }
.tablon-content em { color: #4b6580; font-style: italic; }
.tablon-content br { display: block; height: 4px; content: ""; }

.tablon-encuesta {
    margin-top: 12px; display: flex; flex-direction: column; gap: 8px;
}
.tablon-encuesta-item {
    position: relative; overflow: hidden;
    border-radius: 12px;
    border: 1.5px solid #d6dee8;
    background: #f7faff;
    padding: 11px 14px;
    font-size: 0.9rem; color: #0b1d2e;
    text-align: left;
    cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    transition: all .15s ease;
    width: 100%;
}
.tablon-encuesta-item.votable:hover {
    background: #eaf2fc; border-color: #7fb3e0; transform: translateX(2px);
}
.tablon-enc-radio {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid #93b4d4; flex-shrink: 0;
}
.tablon-encuesta-item.voted {
    cursor: default; padding: 11px 14px;
    background: #fff; border-color: #d6dee8;
}
.tablon-encuesta-item.voted.mine {
    border-color: #0071e3; background: #f0f6ff;
}
.tablon-enc-bar {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, #cfe3fa, #e7f0fb);
    z-index: 0; transition: width .35s ease;
    border-radius: inherit;
}
.tablon-encuesta-item.mine .tablon-enc-bar {
    background: linear-gradient(90deg, #93c5fd, #cfe3fa);
}
.tablon-enc-row {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
}
.tablon-enc-text {
    position: relative; z-index: 1;
    font-weight: 500; flex: 1;
}
.tablon-encuesta-item.mine .tablon-enc-text { font-weight: 700; }
.tablon-enc-pct {
    font-weight: 700; color: #1a5fb4; font-size: 0.85rem;
    flex-shrink: 0; margin-left: 12px;
}
.tablon-encuesta-footer {
    font-size: 0.78rem; color: #6b8aac;
    text-align: center; margin-top: 4px;
}

/* ── Webinar: video embebido + foro de preguntas ─────────────────────────── */
.webinar { margin-top: 14px; }

/* Video responsivo 16:9 (aspect-ratio con fallback de padding para iOS viejos) */
.webinar-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding-top: 56.25%;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 4px 18px rgba(6,14,30,0.12);
}
@supports (aspect-ratio: 16 / 9) { .webinar-video { padding-top: 0; } }
.webinar-video iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0; display: block;
}
.webinar-sinvideo {
    padding: 22px; text-align: center; border-radius: 14px;
    background: #f1f5f9; color: #64748b; font-size: 0.85rem;
}

/* Formulario para preguntar */
.webinar-preguntar { margin-top: 14px; }
.webinar-preguntar label {
    display: block; font-size: 0.82rem; font-weight: 600;
    color: #334155; margin-bottom: 6px;
}
.webinar-input {
    width: 100%; box-sizing: border-box;
    border: 1px solid #dbe3ec; border-radius: 12px;
    padding: 10px 12px; font-size: 0.9rem; font-family: inherit;
    resize: vertical; background: #fff; color: #0f172a;
}
.webinar-input:focus {
    outline: none; border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0,113,227,0.12);
}
.webinar-btn {
    margin-top: 8px; border: 0; cursor: pointer;
    background: #0071e3; color: #fff;
    font-weight: 700; font-size: 0.85rem;
    padding: 9px 18px; border-radius: 999px;
    transition: filter .15s ease, transform .15s ease;
}
.webinar-btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.webinar-btn:disabled { opacity: .6; cursor: default; }

/* Listado de preguntas y respuestas */
.webinar-qa-header {
    margin: 18px 0 10px;
    font-size: 0.85rem; font-weight: 700; color: #334155;
    padding-bottom: 8px; border-bottom: 1px solid #eef2f7;
}
.webinar-vacio {
    font-size: 0.83rem; color: #94a3b8;
    text-align: center; padding: 14px;
}
.webinar-lista { display: flex; flex-direction: column; gap: 12px; }
.webinar-qa {
    border: 1px solid #eef2f7; border-radius: 12px;
    padding: 12px; background: #fbfdff;
}
.webinar-qa.mia { border-color: #bfdbfe; background: #f0f7ff; }
.webinar-q-autor { font-size: 0.8rem; font-weight: 700; color: #0f172a; }
.webinar-q-fecha { font-size: 0.72rem; color: #94a3b8; margin-left: 8px; }
.webinar-q-texto {
    font-size: 0.88rem; color: #334155;
    margin-top: 4px; line-height: 1.5; word-wrap: break-word;
}
.webinar-respuesta {
    margin-top: 10px; padding: 10px 12px;
    border-left: 3px solid #16a34a; border-radius: 0 10px 10px 0;
    background: #f0fdf4; font-size: 0.86rem; color: #14532d; line-height: 1.5;
}
.webinar-resp-label {
    display: block; font-size: 0.7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
    color: #16a34a; margin-bottom: 4px;
}
.webinar-pendiente {
    margin-top: 8px; font-size: 0.78rem; color: #b45309;
    background: #fffbeb; border-radius: 8px; padding: 6px 10px;
    display: inline-block;
}

/* Pantallas muy chicas: ocultar flechas (queda swipe + dots) */
@media (max-width: 480px) {
    .tablon-nav { display: none; }
    .tablon-content li { padding-left: 18px; }
    .tablon-content li::before { font-size: 0.85rem; }
    .webinar-qa-header { font-size: 0.8rem; }
}

/* Lightbox de imagen — abre la imagen ampliada en la misma página */
.tablon-lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.92);
    display: flex; align-items: center; justify-content: center;
    padding-bottom: var(--safe-bottom);
    z-index: 9999;
    padding: clamp(16px, 4vw, 40px);
    animation: tablon-lightbox-in 0.18s ease-out;
    cursor: zoom-out;
}
@keyframes tablon-lightbox-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.tablon-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 60px rgba(0,0,0,0.5);
    cursor: default;
}
.tablon-lightbox-close {
    position: absolute;
    top: clamp(10px, 2vw, 20px);
    right: clamp(10px, 2vw, 20px);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    font-size: 26px; font-weight: 300; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, transform .15s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.tablon-lightbox-close:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.08);
}


/* ════════════════════════════════════════════════════════════
   NOTIFICACIONES PUSH — campanita, dropdown, banners de install
   ════════════════════════════════════════════════════════════ */

.notif-bell {
    position: relative;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(0, 113, 227, 0.15);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #0071e3;
    transition: all 0.18s ease;
    margin-right: 10px;
}
.notif-bell:hover {
    background: #fff;
    border-color: rgba(0, 113, 227, 0.3);
    box-shadow: 0 2px 8px rgba(6,14,30,0.08);
    transform: translateY(-1px);
}

.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    border-radius: 9px;
    text-align: center;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(239,68,68,0.4);
}
.notif-badge.hidden { display: none; }

/* Notification center — modal overlay */
.notif-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 16px max(16px, calc(16px + var(--safe-bottom)));
    animation: fadeIn 0.18s ease;
}
.notif-modal-overlay.hidden { display: none; }

.notif-modal-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(6,14,30,0.22);
    width: 100%;
    max-width: 440px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: popIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.notif-modal-header {
    padding: 16px 16px 12px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
}
.notif-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}
.notif-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.notif-modal-close {
    background: #f1f5f9;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.notif-modal-close:hover { background: #e2e8f0; color: #0f172a; }

.notif-mark-all {
    background: none;
    border: none;
    color: #0071e3;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 600;
}
.notif-mark-all:hover { background: #eff6ff; }

.notif-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.notif-empty {
    padding: 40px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}

.notif-item {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #f8fafc;
    cursor: pointer;
    transition: background 0.12s ease;
    position: relative;
}
.notif-item:hover { background: #f8fafc; }
.notif-item:last-child { border-bottom: none; }

.notif-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    margin-top: 7px;
    flex-shrink: 0;
}
.notif-item.unread .notif-item-dot { background: #0071e3; box-shadow: 0 0 0 3px rgba(0,113,227,0.15); }
.notif-item.unread { background: #f0f7ff; }
.notif-item.unread:hover { background: #e6f0ff; }

.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notif-item-msg {
    font-size: 13px;
    color: #475569;
    line-height: 1.4;
    margin-bottom: 4px;
    word-wrap: break-word;
}
.notif-item-meta { font-size: 11px; color: #94a3b8; }

/* Thumbnail de imagen en el item del dropdown */
.notif-item-thumb {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #e2e8f0;
    background: #f1f5f9;
}

/* Cursor pointer para indicar que es clickeable */
.notif-item { cursor: pointer; }

/* ─── Modal de detalle de notificación ─────────────────────────── */
.notif-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 16px max(16px, calc(16px + var(--safe-bottom)));
    animation: fadeIn 0.18s ease;
}
.notif-detail-overlay.hidden { display: none; }

.notif-detail-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(6,14,30,0.28);
    width: 100%;
    max-width: 440px;
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: popIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.notif-detail-image-wrap {
    width: 100%;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    background: #0d1b30;   /* oscuro: luce bien detrás de imágenes de producto */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* min(95vw, 420px): en teléfono ~375 px → 356 px, suficiente para imagen cuadrada */
    max-height: min(95vw, 420px);
}
.notif-detail-image-wrap img {
    width: 100%;
    height: auto;
    max-height: min(95vw, 420px);
    object-fit: contain;   /* sin recorte: la imagen completa siempre visible */
    display: block;
}

.notif-detail-body {
    padding: 20px 20px 8px;
    overflow-y: auto;
    flex: 1;
}
.notif-detail-title {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 10px;
    line-height: 1.3;
}
.notif-detail-msg {
    font-size: 14px;
    color: #334155;
    line-height: 1.6;
    margin: 0 0 12px;
    white-space: pre-wrap;
    word-break: break-word;
}
.notif-detail-date {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 4px;
}

.notif-detail-actions {
    padding: 12px 20px 18px;
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    border-top: 1px solid #f1f5f9;
}
.notif-detail-url-btn {
    flex: 1;
    background: #0071e3;
    color: #fff;
    border: none;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.notif-detail-url-btn:hover { background: #005bb5; }
.notif-detail-close-btn {
    background: #f1f5f9;
    color: #475569;
    border: none;
    padding: 11px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.notif-detail-close-btn:hover { background: #e2e8f0; color: #0f172a; }

/* ─── Toast en vivo: push recibido con app abierta ─────────────────── */
@keyframes toastSlideDown {
    from { opacity: 0; transform: translateX(-50%) translateY(-28px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes toastSlideUp {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to   { opacity: 0; transform: translateX(-50%) translateY(-28px); }
}
#push-live-toast { pointer-events: all; }
#push-live-toast #push-toast-open:hover  { background: #005bb5 !important; }
#push-live-toast #push-toast-close:hover { color: #0f172a !important; }

.notif-modal-footer {
    border-top: 1px solid #f1f5f9;
    padding: 10px 12px;
    background: #fafbfc;
    flex-shrink: 0;
}
.notif-enable {
    width: 100%;
    background: #0071e3;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
}
.notif-enable:hover { background: #005bb5; transform: translateY(-1px); }
.notif-enable.hidden { display: none; }

/* Estado en Mi Perfil */
.notif-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}
.notif-status-on  { background: #dcfce7; color: #166534; }
.notif-status-off { background: #fef3c7; color: #854d0e; }
.notif-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.notif-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
}

/* Banner iOS */
.ios-install-banner {
    position: fixed;
    bottom: max(16px, calc(16px + var(--safe-bottom)));
    left: 16px;
    right: 16px;
    max-width: 420px;
    margin: 0 auto;
    background: linear-gradient(135deg, #0071e3, #005bb5);
    color: #fff;
    border-radius: 16px;
    padding: 14px 14px 14px 16px;
    box-shadow: 0 12px 32px rgba(0,113,227,0.35);
    z-index: 2147483640;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    animation: slideUp 0.35s ease-out;
}
.ios-install-banner.hidden { display: none; }
.ios-install-icon { font-size: 32px; line-height: 1; }
.ios-install-content { flex: 1; }
.ios-install-content strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}
.ios-install-content p {
    margin: 0 0 6px;
    font-size: 12px;
    opacity: 0.92;
}
.ios-install-content ol {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.6;
}
.ios-install-share {
    display: inline-block;
    background: rgba(255,255,255,0.18);
    padding: 1px 6px;
    border-radius: 5px;
    font-weight: 700;
}
.ios-install-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}
.ios-install-close:hover { background: rgba(255,255,255,0.3); }

/* Banner Android */
.android-install-banner {
    position: fixed;
    bottom: max(16px, calc(16px + var(--safe-bottom)));
    left: 16px;
    right: 16px;
    max-width: 480px;
    margin: 0 auto;
    background: #fff;
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 8px 24px rgba(6,14,30,0.18);
    border: 1px solid rgba(0,113,227,0.18);
    z-index: 2147483640;
    display: flex;
    gap: 10px;
    align-items: center;
    animation: slideUp 0.35s ease-out;
}
.android-install-banner.hidden { display: none; }
.android-install-icon { font-size: 24px; }
.android-install-content { flex: 1; min-width: 0; }
.android-install-content strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}
.android-install-content p {
    margin: 2px 0 0;
    font-size: 12px;
    color: #64748b;
}
.android-install-btn {
    background: #0071e3;
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.android-install-btn:hover { background: #005bb5; }
.android-install-dismiss {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 20px;
    cursor: pointer;
    width: 28px;
    height: 28px;
    padding: 0;
    line-height: 1;
}
.android-install-dismiss:hover { color: #0f172a; }

@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@media (max-width: 600px) {
    .notif-modal-card {
        max-height: 85vh;
    }
}

/* ════════════════════════════════════════════════════════════
   INSTALL PROMO — Modal grande post-login para instalar la PWA
   ════════════════════════════════════════════════════════════ */

.install-promo-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 20px max(20px, calc(20px + var(--safe-bottom)));
    animation: fadeIn 0.3s ease-out;
}
.install-promo-overlay.hidden { display: none; }

.install-promo-card {
    position: relative;
    background: #fff;
    border-radius: 22px;
    width: 100%;
    max-width: 480px;
    max-height: 92vh;
    /* overflow-y: auto en la tarjeta entera ocultaba la cabecera en pantallas pequeñas.
       Ahora solo el body scrollea; el hero (cabecera azul) siempre es visible. */
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

.install-promo-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: #475569;
    z-index: 2;
    transition: all 0.18s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.install-promo-close:hover {
    transform: scale(1.08);
    color: #0f172a;
}

.install-promo-hero {
    position: relative;
    background: linear-gradient(135deg, #0071e3 0%, #005bb5 60%, #003e7f 100%);
    padding: 36px 24px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 22px 22px 0 0;
}
.install-promo-hero::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
    border-radius: 50%;
}
.install-promo-hero::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -10%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
    border-radius: 50%;
}

.install-promo-icon {
    position: relative;
    width: 88px;
    height: 88px;
    background: rgba(255, 255, 255, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.install-promo-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 88px;
    height: 88px;
    border-radius: 22px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    animation: promoPulse 2.4s ease-out infinite;
    z-index: 1;
}

@keyframes promoPulse {
    0%   { transform: translate(-50%, -50%) scale(1);    opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.6);  opacity: 0;   }
}

.install-promo-body {
    padding: 24px 26px 26px;
    overflow-y: auto;   /* el body scrollea si el contenido es largo; la cabecera no se mueve */
    flex: 1;
    min-height: 0;      /* necesario en flex para que overflow-y funcione correctamente */
}

.install-promo-eyebrow {
    display: inline-block;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.install-promo-body h2 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    font-family: 'DM Serif Display', Georgia, serif;
}
.install-promo-body h2 em {
    font-style: italic;
    color: #0071e3;
    background: linear-gradient(135deg, #0071e3, #00a8ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.install-promo-lead {
    margin: 0 0 18px;
    font-size: 14px;
    color: #475569;
    line-height: 1.5;
}

.install-promo-benefits {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px;
}

.install-promo-benefit {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #f8fafc;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
}
.install-promo-benefit .ipb-icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}
.install-promo-benefit strong {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}
.install-promo-benefit p {
    margin: 0;
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.45;
}

.install-promo-instructions {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 16px;
    padding: 18px 18px 20px;
    margin-bottom: 18px;
    border: 1px solid rgba(0, 113, 227, 0.18);
}

.ipi-title {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
    text-align: center;
}

.ipi-lead {
    text-align: center;
    margin: 0 0 12px;
    font-size: 13px;
    color: #475569;
}

.ipi-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ipi-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.ipi-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0071e3;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 113, 227, 0.35);
}
.ipi-step-body { flex: 1; padding-top: 2px; }
.ipi-step-body strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}
.ipi-step-hint {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}
.ipi-share-icon {
    display: inline-block;
    background: #0071e3;
    color: #fff;
    padding: 1px 6px;
    border-radius: 5px;
    font-weight: 700;
}

.ipi-install-btn {
    width: 100%;
    background: linear-gradient(135deg, #0071e3, #005bb5);
    color: #fff;
    border: none;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 6px 16px rgba(0, 113, 227, 0.35);
}
.ipi-install-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 113, 227, 0.45);
}

.install-promo-actions {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}
.install-promo-later,
.install-promo-already {
    flex: 1;
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #64748b;
    padding: 11px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
}
.install-promo-later:hover,
.install-promo-already:hover {
    background: #f8fafc;
    color: #0f172a;
    border-color: #cbd5e1;
}
.install-promo-already {
    background: #f1f5f9;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes popIn {
    from { transform: scale(0.85) translateY(20px); opacity: 0; }
    to   { transform: scale(1) translateY(0);       opacity: 1; }
}

@media (max-width: 480px) {
    .install-promo-card {
        max-height: 96vh;
        border-radius: 20px;
    }
    .install-promo-body h2 { font-size: 21px; }
    .install-promo-hero { padding: 28px 20px 22px; }
    .install-promo-icon { width: 76px; height: 76px; }
    .install-promo-pulse { width: 76px; height: 76px; }
    .install-promo-benefit { padding: 10px 12px; }
    .install-promo-benefit .ipb-icon { font-size: 22px; }
}

/* =============================================================
   BANNER MUNDIAL 2026 — edición especial (siempre visible)
   ============================================================= */
/* ── Clara Salazar AI — siempre colapsada por defecto ── */
.__first-message-bubble-wrapper { display: none !important; }

/* ── BANNER MUNDIAL 2026 · FIFA 26 STYLE ── */
@keyframes mw-live  { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,230,118,.7)} 50%{opacity:.35;box-shadow:0 0 0 7px rgba(0,230,118,0)} }
@keyframes mw-slide { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes mw-ring  { 0%,100%{box-shadow:0 0 0 0 rgba(0,230,118,.5)} 60%{box-shadow:0 0 0 14px rgba(0,230,118,0)} }
@keyframes mw-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes mw-bar   { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

.mundial-hero {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin: 24px 40px 22px;
    color: #fff;
    background: #000;
    box-shadow: 0 24px 64px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08);
    animation: mw-slide .5s cubic-bezier(.22,1,.36,1) both;
    display: flex;
    align-items: stretch;
    min-height: 210px;
}
/* Dot grid (mismo del login) */
.mundial-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}
/* Spotlight dorado derecha */
.mundial-hero::after {
    content: "";
    position: absolute;
    top: -40%; right: 0;
    width: 50%; height: 200%;
    background: radial-gradient(ellipse at right, rgba(255,214,0,.07) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* Barra Colombia inferior */
.mw-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #fcd116 50%, #003087 75%, #ce1126 100%);
    z-index: 5;
}

/* Panel texto izquierda */
.mw-content {
    position: relative;
    z-index: 2;
    flex: 1;
    padding: 28px 20px 28px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}

/* Eyebrow */
.mw-eyebrow {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .22em;
    color: rgba(255,255,255,.4);
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Badge LIVE */
.mw-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(0,230,118,.1);
    border: 1px solid rgba(0,230,118,.3);
    color: #00e676;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
    width: fit-content;
}
.mw-live-dot {
    width: 7px; height: 7px;
    background: #00e676;
    border-radius: 50%;
    flex-shrink: 0;
    animation: mw-live 1.3s ease-in-out infinite;
}

/* Subtítulo */
.mw-sub {
    font-size: 14px;
    color: rgba(255,255,255,.6);
    line-height: 1.6;
    margin-bottom: 16px;
}
.mw-sub strong { color: #fcd116; font-weight: 700; }

/* Barra Colombia */
.mw-col-bar {
    display: flex;
    height: 4px;
    border-radius: 999px;
    overflow: hidden;
    gap: 2px;
    margin-bottom: 18px;
    width: 160px;
}
.mw-col-y { flex: 2; background: #fcd116; }
.mw-col-b { flex: 1; background: #003087; }
.mw-col-r { flex: 1; background: #ce1126; }

/* Botón CTA */
.mundial-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #00e676, #00c853);
    color: #002a14;
    font-weight: 800;
    font-size: 13px;
    padding: 12px 22px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    width: fit-content;
    transition: transform .15s ease, filter .15s ease;
    box-shadow: 0 4px 24px rgba(0,230,118,.4);
    animation: mw-ring 2.2s ease infinite;
}
.mundial-cta:hover  { transform: translateY(-2px) scale(1.04); filter: brightness(1.1); }
.mundial-cta:active { transform: scale(.97); }

/* Panel derecha — imagen oficial Fútbol 26 */
.mw-trophy-panel {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 28px;
}
.mw-trophy-img {
    width: clamp(180px, 20vw, 240px);
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 16px;
    filter: drop-shadow(0 10px 28px rgba(0,0,0,.55)) drop-shadow(0 0 28px rgba(255,214,0,.25));
    animation: mw-float 3.8s ease-in-out infinite;
}

@media (max-width: 700px) {
    /* En móvil el banner se apila: texto arriba, copa abajo centrada */
    .mundial-hero    { flex-direction: column; min-height: auto; align-items: center; margin: 16px 16px 18px; }
    .mw-content      { padding: 18px 18px 10px; align-items: center; text-align: center; }
    .mw-col-bar      { width: 120px; }
    .mundial-cta     { align-self: center; }
    .mw-trophy-panel { width: 100%; padding: 0 20px 22px; justify-content: center; }
    .mw-trophy-img   { width: clamp(150px, 42vw, 210px); }
}
@media (max-width: 480px) {
    .mw-content    { padding: 16px 16px 8px; }
    .mw-sub        { font-size: 13px; }
    .mw-trophy-img { width: clamp(140px, 50vw, 190px); }
}