/* ================================
   AAG - Asistente Apoyo Gestión
   Estilos globales
================================ */

:root {
  --azul-aag: #1f3a6b;
  --azul-aag-claro: #2c5594;
  --verde-aag: #5fa05f;
  --verde-aag-claro: #7dbc7d;
  --gris-claro: #f5f7fa;
  --gris-medio: #e3e8ef;
  --gris-texto: #4a5568;
  --texto-fuerte: #1a202c;
  --blanco: #ffffff;
  --sombra: 0 4px 20px rgba(31, 58, 107, 0.08);
  --sombra-fuerte: 0 8px 30px rgba(31, 58, 107, 0.18);
  --radio: 12px;
  --transicion: 0.25s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--texto-fuerte);
  background: var(--gris-claro);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul-aag-claro); text-decoration: none; }
a:hover { color: var(--verde-aag); }

img { max-width: 100%; display: block; }

.contenedor { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ====== Navegación ====== */
.nav {
  background: var(--blanco);
  box-shadow: var(--sombra);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 16px;
}
.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__brand img { height: 140px; width: auto; }
.nav__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.nav__brand-text strong { color: var(--azul-aag); font-size: 1.8rem; letter-spacing: 0.6px; line-height: 1; }
.nav__brand-text span { color: var(--verde-aag); font-size: 1rem; font-weight: 600; }
.nav__brand--text-only { padding: 4px 0; }
.nav__menu { display: flex; gap: 28px; align-items: center; }
.nav__menu a { color: var(--texto-fuerte); font-weight: 500; font-size: 0.95rem; }
.nav__menu a:hover { color: var(--azul-aag); }

.btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  transition: var(--transicion);
  text-align: center;
}
.btn--primario {
  background: linear-gradient(135deg, var(--azul-aag), var(--azul-aag-claro));
  color: var(--blanco);
  box-shadow: 0 4px 14px rgba(31, 58, 107, 0.3);
}
.btn--primario:hover {
  transform: translateY(-2px);
  color: var(--blanco);
  box-shadow: 0 6px 18px rgba(31, 58, 107, 0.4);
}
.btn--secundario {
  background: linear-gradient(135deg, var(--verde-aag), var(--verde-aag-claro));
  color: var(--blanco);
}
.btn--secundario:hover { transform: translateY(-2px); color: var(--blanco); }
.btn--fantasma {
  background: transparent;
  color: var(--azul-aag);
  border: 2px solid var(--azul-aag);
}
.btn--fantasma:hover { background: var(--azul-aag); color: var(--blanco); }

/* ====== Hero ====== */
.hero {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef6 100%);
  padding: 80px 0 60px;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: center;
}
.hero__tagline {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--verde-aag);
  background: linear-gradient(135deg, #e8f4e8, #f5fbf5);
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid #cfe5cf;
  margin-bottom: 12px;
}
.hero__alerta {
  display: inline-block;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--blanco);
  background: linear-gradient(135deg, #ff7b00, #d04444);
  padding: 8px 18px;
  border-radius: 24px;
  margin-bottom: 16px;
  margin-left: 8px;
  box-shadow: 0 4px 14px rgba(208, 68, 68, 0.35);
  animation: pulseAlerta 2.4s ease-in-out infinite;
}
@keyframes pulseAlerta {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@media (max-width: 880px) {
  .hero__alerta { margin-left: 0; }
}
.hero__titulo {
  font-size: 2.6rem;
  color: var(--azul-aag);
  line-height: 1.15;
  margin-bottom: 20px;
}
.hero__titulo span { color: var(--verde-aag); }
.hero__sub {
  font-size: 1.15rem;
  color: var(--gris-texto);
  margin-bottom: 30px;
}
.hero__acciones { display: flex; gap: 14px; flex-wrap: wrap; }

.hero__canales {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 28px;
}
.hero__canal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blanco);
  border: 1px solid var(--gris-medio);
  padding: 9px 16px 9px 12px;
  border-radius: 30px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--azul-aag);
  transition: var(--transicion);
  box-shadow: 0 2px 6px rgba(31, 58, 107, 0.05);
}
.hero__canal:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(31, 58, 107, 0.12);
  border-color: var(--azul-aag-claro);
}
.hero__canal-icono {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
@media (max-width: 880px) {
  .hero__canales { justify-content: center; }
}
.hero__logo-card {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 30px;
  box-shadow: var(--sombra-fuerte);
  display: flex;
  justify-content: center;
}
.hero__logo-card img { max-height: 1100px; width: auto; }
.hero__logo-card { padding: 18px; }
.hero__video {
  width: 100%;
  height: auto;
  max-height: 1100px;
  display: block;
  border-radius: 10px;
  background: var(--blanco);
}

/* ====== Secciones ====== */
section { padding: 70px 0; }
.seccion__titulo {
  text-align: center;
  font-size: 2rem;
  color: var(--azul-aag);
  margin-bottom: 12px;
}
.seccion__sub {
  text-align: center;
  color: var(--gris-texto);
  margin-bottom: 48px;
  font-size: 1.05rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ====== Actividades (chips amplios) ====== */
.actividades-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 36px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.actividad-chip {
  background: var(--blanco);
  border: 1px solid var(--gris-medio);
  padding: 11px 18px;
  border-radius: 28px;
  font-size: 0.95rem;
  color: var(--azul-aag);
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(31, 58, 107, 0.05);
  transition: var(--transicion);
  white-space: nowrap;
}
.actividad-chip:hover {
  border-color: var(--verde-aag);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(31, 58, 107, 0.1);
}
.actividad-chip--mas {
  background: linear-gradient(135deg, #e8eef6, #e8f4e8);
  border-color: var(--verde-aag);
  color: var(--azul-aag);
  font-weight: 600;
}

.bloque-proximamente {
  background: var(--gris-claro);
  border-left: 4px solid var(--azul-aag);
  padding: 22px 26px;
  border-radius: 0 12px 12px 0;
  max-width: 760px;
  margin: 24px auto 0;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  text-align: left;
}
.bloque-proximamente__icono {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.bloque-proximamente strong {
  color: var(--azul-aag);
  font-size: 1.05rem;
  display: block;
  margin-bottom: 6px;
}
.bloque-proximamente p {
  color: var(--gris-texto);
  font-size: 0.93rem;
  line-height: 1.55;
}

/* ====== Verticales (legacy, ya no se usa en la landing pero queda por si se reactiva) ====== */
.verticales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}
.vertical {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--sombra);
  transition: var(--transicion);
  border-top: 4px solid var(--verde-aag);
  cursor: pointer;
}
.vertical:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-fuerte);
}
.vertical__icono {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--azul-aag), var(--verde-aag));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blanco);
  font-size: 1.8rem;
}
.vertical h3 { color: var(--azul-aag); font-size: 1.15rem; margin-bottom: 8px; }
.vertical p { color: var(--gris-texto); font-size: 0.92rem; }

/* ====== Cómo funciona ====== */
.como { background: var(--blanco); }
.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.paso {
  padding: 28px 24px;
  border-radius: var(--radio);
  background: var(--gris-claro);
  position: relative;
}
.paso__num {
  position: absolute;
  top: -16px;
  left: 24px;
  background: var(--azul-aag);
  color: var(--blanco);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.paso h4 { color: var(--azul-aag); margin: 8px 0 10px; font-size: 1.05rem; }
.paso p { color: var(--gris-texto); font-size: 0.93rem; }

/* ====== Canales ====== */
.canales {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}
.canal {
  background: var(--blanco);
  padding: 18px 24px;
  border-radius: 50px;
  box-shadow: var(--sombra);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--azul-aag);
}
.canal__punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--verde-aag);
}

/* ====== Trial banner ====== */
.trial-banner {
  background: linear-gradient(135deg, var(--verde-aag) 0%, #4d8b4d 100%);
  color: var(--blanco);
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.trial-banner__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.trial-banner__icono {
  font-size: 2.6rem;
  line-height: 1;
  flex-shrink: 0;
}
.trial-banner__texto {
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trial-banner__texto strong {
  font-size: 1.25rem;
  letter-spacing: 0.5px;
}
.trial-banner__texto span {
  font-size: 0.92rem;
  opacity: 0.93;
  line-height: 1.4;
}
.trial-banner__cta {
  background: var(--blanco);
  color: var(--azul-aag);
  font-weight: 700;
  padding: 12px 22px;
  border: none;
  flex-shrink: 0;
}
.trial-banner__cta:hover {
  background: #f5f9ff;
  color: var(--azul-aag);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
@media (max-width: 700px) {
  .trial-banner__inner { text-align: center; }
  .trial-banner__cta { width: 100%; }
}

/* ====== Planes ====== */
.planes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.planes-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.planes-grid--4 .plan { padding: 26px 22px; }
.planes-grid--4 .plan h3 { font-size: 1.15rem; }
.planes-grid--4 .plan__precio { font-size: 1.85rem; }
.planes-grid--4 .plan li { font-size: 0.88rem; padding: 6px 0; }

/* Tarjetas de planes en panel admin (read-only por ahora) */
.planes-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.plan-admin-card {
  background: var(--blanco);
  border: 1px solid var(--gris-medio);
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.plan-admin-card--destacado {
  border-color: var(--verde-aag);
  border-width: 2px;
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 60%);
}
.plan-admin-card h3 {
  color: var(--azul-aag);
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.plan-admin-card__precio {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--verde-aag);
  margin-bottom: 12px;
  line-height: 1;
}
.plan-admin-card__precio span {
  font-size: 0.78rem;
  color: var(--gris-texto);
  font-weight: 500;
  margin-left: 4px;
}
.plan-admin-card__bullets {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  flex: 1;
}
.plan-admin-card__bullets li {
  padding: 5px 0;
  font-size: 0.85rem;
  color: var(--gris-texto);
  border-bottom: 1px solid var(--gris-claro);
}
.plan-admin-card__bullets li:last-child { border-bottom: none; }
.plan-admin-card__costo {
  display: block;
  font-size: 0.78rem;
  color: var(--gris-texto);
  font-style: italic;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--gris-claro);
  border-radius: 6px;
  line-height: 1.45;
}
.plan-admin-card .btn-accion[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  align-self: stretch;
  text-align: center;
}
.plan {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 32px 28px;
  box-shadow: var(--sombra);
  text-align: center;
  border: 2px solid transparent;
  transition: var(--transicion);
}
.plan--destacado {
  border-color: var(--verde-aag);
  transform: scale(1.04);
}
.plan h3 { color: var(--azul-aag); font-size: 1.25rem; margin-bottom: 6px; }
.plan__precio {
  font-size: 2.2rem;
  color: var(--verde-aag);
  font-weight: 700;
  margin: 12px 0;
}
.plan__precio span { font-size: 0.9rem; color: var(--gris-texto); font-weight: 500; }
.plan ul {
  list-style: none;
  margin: 18px 0 24px;
  text-align: left;
}
.plan li {
  padding: 8px 0;
  border-bottom: 1px solid var(--gris-medio);
  color: var(--gris-texto);
  font-size: 0.93rem;
}
.plan li::before {
  content: '✓';
  color: var(--verde-aag);
  font-weight: 700;
  margin-right: 8px;
}

/* ---- Planes v2 (signup con trial 7 días) ---- */
.planes-badge-top {
  display: inline-block;
  background: #e8f4e8;
  color: var(--verde-aag);
  border: 1px solid var(--verde-aag-claro);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  margin: 0 auto 18px;
}
.plan--v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 28px 24px;
}
.plan--v2 .plan__nombre {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gris-texto);
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}
.plan--v2 .plan__precio {
  font-size: 2.1rem;
  color: var(--texto-fuerte);
  font-weight: 800;
  margin: 0 0 14px;
  line-height: 1.15;
}
.plan--v2 .plan__precio span {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--gris-texto);
  font-weight: 500;
  margin-left: 4px;
}
.plan--v2 .plan__precio-antes {
  text-decoration: line-through;
  color: #b0b6bf !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  margin-left: 6px !important;
}
.plan--v2 .plan__lista {
  list-style: none;
  margin: 14px 0 22px;
  padding: 0;
  flex: 1;
  border-top: 1px solid var(--gris-medio);
  padding-top: 16px;
}
.plan--v2 .plan__lista li {
  padding: 7px 0;
  border-bottom: none;
  font-size: 0.93rem;
  color: var(--texto-fuerte);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.plan--v2 .plan__lista li::before {
  content: '✓';
  color: var(--verde-aag);
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.plan--v2 .plan__lista li.no {
  color: #b0b6bf;
}
.plan--v2 .plan__lista li.no::before {
  content: '✕';
  color: #b0b6bf;
}
.plan--v2 .plan__cta {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: auto;
}
.plan--popular {
  border-color: var(--verde-aag) !important;
  box-shadow: 0 8px 24px rgba(95, 160, 95, 0.18);
}
.plan__badge-popular {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--verde-aag);
  color: var(--blanco);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  box-shadow: 0 3px 8px rgba(95, 160, 95, 0.35);
  white-space: nowrap;
}

/* ====== Footer ====== */
.footer {
  background: var(--azul-aag);
  color: var(--blanco);
  padding: 40px 0 20px;
  margin-top: 40px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 30px;
}
.footer h4 { margin-bottom: 14px; font-size: 1rem; color: var(--verde-aag-claro); }
.footer a { color: rgba(255, 255, 255, 0.85); display: block; padding: 4px 0; font-size: 0.9rem; }
.footer a:hover { color: var(--verde-aag-claro); }
.footer__copy {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

/* ====== Login ====== */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 16px;
  background: linear-gradient(135deg, var(--azul-aag) 0%, var(--verde-aag) 100%);
}
.auth-card {
  background: var(--blanco);
  border-radius: 16px;
  padding: 40px 36px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
.auth-card__logo {
  text-align: center;
  margin-bottom: 24px;
}
.auth-card__logo img { height: 90px; margin: 0 auto; }
.auth-card h1 {
  text-align: center;
  font-size: 1.4rem;
  color: var(--azul-aag);
  margin-bottom: 6px;
}
.auth-card__sub {
  text-align: center;
  color: var(--gris-texto);
  font-size: 0.9rem;
  margin-bottom: 28px;
}
.auth-tabs {
  display: flex;
  border-radius: 8px;
  background: var(--gris-claro);
  padding: 4px;
  margin-bottom: 24px;
}
.auth-tab {
  flex: 1;
  padding: 9px;
  text-align: center;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  color: var(--gris-texto);
  border: none;
  background: transparent;
  transition: var(--transicion);
}
.auth-tab.active {
  background: var(--blanco);
  color: var(--azul-aag);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.campo { margin-bottom: 16px; }
.campo label {
  display: block;
  font-size: 0.85rem;
  color: var(--gris-texto);
  margin-bottom: 6px;
  font-weight: 500;
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--gris-medio);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  transition: var(--transicion);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--azul-aag-claro);
  box-shadow: 0 0 0 3px rgba(44, 85, 148, 0.15);
}
.auth-card .btn { width: 100%; padding: 13px; }
.auth-card__pie {
  margin-top: 22px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--gris-texto);
}

/* ====== Panel (admin/cliente) ====== */
.panel { display: flex; min-height: 100vh; background: var(--gris-claro); }
.panel-side {
  width: 240px;
  background: var(--azul-aag);
  color: var(--blanco);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
}
.panel-side__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
}
.panel-side__brand img {
  height: 130px;
  width: auto;
  background: var(--blanco);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.panel-side__brand strong { font-size: 1.05rem; letter-spacing: 0.3px; }
.panel-side__brand-full {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
  text-align: center;
  line-height: 1.3;
}
.panel-side nav { flex: 1; }
.panel-side nav a {
  display: block;
  padding: 11px 14px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 4px;
  font-size: 0.92rem;
  transition: var(--transicion);
}
.panel-side nav a:hover, .panel-side nav a.activo {
  background: rgba(255, 255, 255, 0.12);
  color: var(--blanco);
}
.panel-side__pie a { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); }
/* Cerrar sesión dentro del menú, justo bajo la última opción */
.panel-side nav a.nav-salir {
  margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0 0 8px 8px;
  color: rgba(255, 255, 255, 0.75);
}

.panel-main { flex: 1; padding: 30px 36px; overflow-x: auto; }
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 26px;
}
.panel-head h1 { font-size: 1.55rem; color: var(--azul-aag); }
.panel-head__usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--blanco);
  padding: 8px 14px;
  border-radius: 30px;
  box-shadow: var(--sombra);
  font-size: 0.9rem;
}
.panel-head__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--azul-aag), var(--verde-aag));
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
}

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}
.tarjeta {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 22px;
  box-shadow: var(--sombra);
}
.tarjeta__label { font-size: 0.82rem; color: var(--gris-texto); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.tarjeta__valor { font-size: 1.8rem; font-weight: 700; color: var(--azul-aag); }
.tarjeta__detalle { font-size: 0.85rem; color: var(--verde-aag); margin-top: 6px; }

.bloque {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 24px;
  box-shadow: var(--sombra);
  margin-bottom: 22px;
}
.bloque h2 {
  font-size: 1.1rem;
  color: var(--azul-aag);
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.tabla th, .tabla td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid var(--gris-medio);
}
.tabla th {
  font-weight: 600;
  color: var(--gris-texto);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.tabla tr:hover td { background: var(--gris-claro); }

/* Contenedor con scroll horizontal para tablet / pantallas intermedias */
.tabla-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 10px;
}

/* Tabla de Conversaciones — específicos */
.tabla-conv__hint {
  display: none;
  color: var(--gris-texto);
  font-size: 0.85rem;
  margin: -4px 0 12px;
}
.tabla-conv__fecha { white-space: nowrap; font-size: 0.88rem; }
.tabla-conv__resumen { min-width: 240px; }

/* En tablet: aún es tabla pero permite scroll horizontal y muestra el hint */
@media (max-width: 880px) {
  .tabla-conv__hint { display: block; }
  .tabla-conv { min-width: 760px; }
}

/* En celular: cada fila se convierte en tarjeta legible */
@media (max-width: 600px) {
  .tabla-wrap { overflow-x: visible; }
  .tabla-conv { min-width: 0; display: block; }
  .tabla-conv thead { display: none; }
  .tabla-conv tbody { display: block; }
  .tabla-conv tr {
    display: block;
    background: var(--blanco);
    border: 1px solid var(--gris-medio);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(31, 58, 107, 0.05);
  }
  .tabla-conv tr:hover td { background: transparent; }
  .tabla-conv td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--gris-medio);
    color: var(--azul-aag);
    font-size: 0.92rem;
  }
  .tabla-conv td:last-child { border-bottom: none; }
  .tabla-conv td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--gris-texto);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
    min-width: 90px;
  }
  .tabla-conv__resumen {
    flex-direction: column;
    align-items: stretch !important;
    min-width: 0;
  }
  .tabla-conv__resumen::before { margin-bottom: 4px; }
}

.chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
}
.chip--verde { background: #e6f4e6; color: #2d6a2d; }
.chip--azul { background: #e3edf9; color: var(--azul-aag); }
.chip--amarillo { background: #fff4d4; color: #8a6d1a; }
.chip--rojo { background: #fde2e2; color: #a73838; }

/* canales en cliente con mini-calendario */
.canales-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.canales-nav {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--blanco);
  border: 1px solid var(--gris-medio);
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 6px;
}
.canales-nav__rango {
  font-size: 0.95rem;
  color: var(--azul-aag);
  font-weight: 600;
}
.canales-nav__btn {
  background: var(--blanco);
  border: 1px solid var(--gris-medio);
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--azul-aag);
  font-family: inherit;
  transition: var(--transicion);
}
.canales-nav__btn:hover:not(:disabled) {
  background: var(--azul-aag);
  color: var(--blanco);
  border-color: var(--azul-aag);
}
.canales-nav__btn:disabled { opacity: 0.4; cursor: not-allowed; }

.canal-card {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 16px 18px;
  box-shadow: var(--sombra);
  display: block;
}
.canal-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.canal-card__icono { width: 32px; height: 32px; flex-shrink: 0; }
.canal-card__icono svg { width: 100%; height: 100%; }
.canal-card__info { flex: 1; min-width: 0; }
.canal-card__nombre {
  font-weight: 600;
  color: var(--azul-aag);
  font-size: 0.95rem;
}
.canal-card__hoy {
  font-size: 0.78rem;
  color: var(--gris-texto);
  margin-top: 2px;
}

.canal-card__cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 2px 6px;
  border-radius: 6px;
  background: var(--gris-claro);
  border: 1px solid transparent;
  transition: var(--transicion);
}
.cal-dia__nombre {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gris-texto);
  font-weight: 600;
}
.cal-dia__num {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--gris-texto);
  margin-top: 2px;
  line-height: 1;
}
.cal-dia.tiene-actividad {
  background: #e8f4e8;
  border-color: #cfe5cf;
}
.cal-dia.tiene-actividad .cal-dia__num { color: var(--verde-aag); }
.cal-dia.es-hoy {
  background: var(--azul-aag);
  border-color: var(--azul-aag);
}
.cal-dia.es-hoy .cal-dia__nombre,
.cal-dia.es-hoy .cal-dia__num { color: var(--blanco); }
.cal-dia.es-hoy.tiene-actividad {
  background: linear-gradient(135deg, var(--azul-aag), var(--verde-aag));
}

/* ====== Banner de pasos (conexión correo) ====== */
.pasos-correo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 8px 0 22px;
}
.paso-correo {
  background: var(--blanco);
  border: 1px solid var(--gris-medio);
  border-radius: 10px;
  padding: 22px 18px 20px;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.paso-correo:hover {
  border-color: var(--azul-aag-claro);
  box-shadow: 0 2px 10px rgba(31, 58, 107, 0.06);
}
.paso-correo__num {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 24px;
  height: 24px;
  background: var(--gris-claro);
  color: var(--azul-aag);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
}
.paso-correo__icono {
  font-size: 1.55rem;
  margin-bottom: 12px;
  line-height: 1;
}
.paso-correo__titulo {
  font-size: 0.92rem;
  color: var(--azul-aag);
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.3;
  padding-right: 30px;
}
.paso-correo__desc {
  font-size: 0.84rem;
  color: var(--gris-texto);
  line-height: 1.55;
}
.paso-correo__desc a {
  color: var(--azul-aag-claro);
  word-break: break-word;
  font-weight: 500;
}
.paso-correo__desc code {
  background: var(--gris-claro);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'Consolas', 'Menlo', monospace;
  font-size: 0.82rem;
  color: var(--azul-aag);
}

.nota-mini {
  background: var(--gris-claro);
  border-left: 3px solid var(--azul-aag-claro);
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  font-size: 0.85rem;
  color: var(--gris-texto);
  line-height: 1.55;
}
.nota-mini strong { color: var(--texto-fuerte); }

.nota-recomendacion {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fdf8ec;
  border-left: 3px solid #d99a1f;
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  font-size: 0.88rem;
  color: var(--gris-texto);
  line-height: 1.55;
  margin: 6px 0 18px;
}
.nota-recomendacion__icono {
  font-size: 1.2rem;
  line-height: 1.2;
  flex-shrink: 0;
}
.nota-recomendacion strong { color: #8a6d1a; }

.aviso-legal {
  font-size: 0.85rem;
  color: var(--gris-texto);
  line-height: 1.6;
  background: #fafbfc;
  border: 1px solid var(--gris-medio);
  padding: 16px 18px;
  border-radius: 8px;
}
.aviso-legal__titulo {
  display: block;
  color: var(--texto-fuerte);
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 0.92rem;
}

.estado-correo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: #f0f7f0;
  border: 1px solid #cce5cc;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 0.92rem;
  color: #2d6a2d;
}
.estado-correo strong { color: #2d6a2d; }
.estado-correo__check { font-size: 1.2rem; line-height: 1; flex-shrink: 0; padding-top: 2px; }
.estado-correo__cuerpo { flex: 1; }
.estado-correo__hint {
  font-size: 0.85rem;
  color: var(--azul-aag);
  margin-top: 6px;
  font-weight: 500;
}

/* Zona roja destacada: el campo entero (label + input + helper) en una caja roja
   para que sea obvio dónde se pega algo crítico. */
.zona-roja {
  background: #ffe5e5;
  border: 2px solid #cc2020;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(204, 32, 32, 0.12);
}
.zona-roja .label-importante {
  color: #8b1010;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 8px;
  display: block;
}
.zona-roja .input-importante {
  border: 2px solid #cc2020;
  background: #ffd0d0;
  font-family: 'Consolas', 'Menlo', monospace;
  font-weight: 700;
  letter-spacing: 1.2px;
  font-size: 1rem;
  color: #4a0808;
  padding: 12px 16px;
  width: 100%;
  border-radius: 8px;
}
.zona-roja .input-importante::placeholder {
  color: #c08080;
  letter-spacing: 1.5px;
  font-weight: 400;
}
.zona-roja .input-importante:focus {
  outline: none;
  border-color: #8b1010;
  box-shadow: 0 0 0 3px rgba(139, 16, 16, 0.25);
  background: #fff5f5;
}
.zona-roja__hint {
  display: block;
  margin-top: 6px;
  color: #8b1010;
  font-size: 0.78rem;
  font-weight: 500;
}

/* Checkbox del aviso legal: estilo neutro sobrio, tick verde cuando se acepta */
.checkbox-aviso {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  padding: 14px 16px;
  border: 1px solid var(--gris-medio);
  border-radius: 8px;
  background: var(--gris-claro);
  transition: var(--transicion);
}
.checkbox-aviso:hover { border-color: var(--azul-aag-claro); }
.checkbox-aviso input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--gris-medio);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  background: var(--blanco);
  margin: 1px 0 0 0;
  transition: var(--transicion);
}
.checkbox-aviso input[type="checkbox"]:checked {
  background: var(--verde-aag);
  border-color: var(--verde-aag);
}
.checkbox-aviso input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  color: var(--blanco);
  font-size: 16px;
  font-weight: 800;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}
.checkbox-aviso__texto {
  color: var(--gris-texto);
  font-size: 0.9rem;
  line-height: 1.5;
}
.checkbox-aviso input:checked ~ .checkbox-aviso__texto {
  color: #2d6a2d;
}

/* ====== Botones de acción de tabla ====== */
.btn-accion {
  padding: 6px 14px;
  font-size: 0.83rem;
  border: 1px solid var(--gris-medio);
  background: var(--blanco);
  color: var(--azul-aag);
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transicion);
  font-weight: 500;
  font-family: inherit;
}
.btn-accion:hover {
  background: var(--azul-aag);
  color: var(--blanco);
  border-color: var(--azul-aag);
}
.btn-accion--peligro {
  color: #a73838;
  border-color: var(--gris-medio);
}
.btn-accion--peligro:hover {
  background: #fde2e2;
  color: #a73838;
  border-color: #fbc6c6;
}

/* ====== Modal genérico ====== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 22, 38, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
  overflow-y: auto;
  animation: fadeIn 0.18s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  background: var(--blanco);
  border-radius: 14px;
  max-width: 640px;
  width: 100%;
  padding: 26px 28px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-height: 92vh;
  overflow-y: auto;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.modal-head h2 { font-size: 1.25rem; color: var(--azul-aag); margin: 0; }
.modal-cerrar {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  color: var(--gris-texto);
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.modal-cerrar:hover { background: var(--gris-claro); color: var(--texto-fuerte); }
.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.canales-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.canales-checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--gris-medio);
  border-radius: 8px;
  font-size: 0.88rem;
  cursor: pointer;
  transition: var(--transicion);
}
.canales-checks label:hover { border-color: var(--azul-aag-claro); }
.canales-checks input:checked + span,
.canales-checks label:has(input:checked) { background: #e8f4e8; border-color: var(--verde-aag); }
.canales-checks label:has(input:disabled) { background: var(--gris-claro); cursor: not-allowed; opacity: 0.85; }
.modal-acciones {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--gris-medio);
}
.input-copiable {
  display: flex;
  gap: 6px;
}
.input-copiable input { flex: 1; }
.input-copiable button {
  padding: 0 14px;
  border: 1px solid var(--gris-medio);
  background: var(--blanco);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--azul-aag);
  white-space: nowrap;
}
.input-copiable button:hover { background: var(--gris-claro); }
@media (max-width: 600px) {
  .modal-card { padding: 20px; }
  .modal-grid { grid-template-columns: 1fr; }
}

/* ====== Calendario de horarios ====== */
.modo-horario {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.modo-horario__opcion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--gris-medio);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  flex: 1;
  min-width: 220px;
  transition: var(--transicion);
}
.modo-horario__opcion:hover { border-color: var(--azul-aag-claro); }
.modo-horario__opcion:has(input:checked) {
  background: #e8f4e8;
  border-color: var(--verde-aag);
  color: var(--azul-aag);
  font-weight: 500;
}
.modo-horario__opcion input[type="radio"] { accent-color: var(--verde-aag); }

.bloque-horario {
  background: var(--gris-claro);
  border: 1px solid var(--gris-medio);
  border-radius: 10px;
  padding: 16px;
}
.hora-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 0.92rem;
  color: var(--gris-texto);
}
.hora-row input[type="time"] {
  padding: 7px 10px;
  border: 1px solid var(--gris-medio);
  border-radius: 6px;
  font-size: 0.92rem;
  font-family: inherit;
  background: var(--blanco);
}
.dias-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.dia-chip {
  cursor: pointer;
}
.dia-chip input { display: none; }
.dia-chip span {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 22px;
  border: 1px solid var(--gris-medio);
  background: var(--blanco);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gris-texto);
  transition: var(--transicion);
  min-width: 50px;
  text-align: center;
}
.dia-chip input:checked + span {
  background: var(--azul-aag);
  color: var(--blanco);
  border-color: var(--azul-aag);
}

.dia-row {
  display: grid;
  grid-template-columns: 110px 110px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--gris-medio);
}
.dia-row:last-child { border-bottom: none; }
.dia-row__nombre {
  font-weight: 500;
  color: var(--azul-aag);
  font-size: 0.92rem;
}
.dia-row__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--gris-texto);
  cursor: pointer;
}
.dia-row__toggle input { accent-color: var(--verde-aag); }
.dia-row__horas {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--gris-texto);
}
.dia-row__horas input[type="time"] {
  padding: 6px 9px;
  border: 1px solid var(--gris-medio);
  border-radius: 6px;
  font-size: 0.88rem;
  font-family: inherit;
  background: var(--blanco);
}
.dia-row.cerrado .dia-row__horas { opacity: 0.4; pointer-events: none; }

.info-negocio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.input-con-accion {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.input-con-accion input { flex: 1; }
.btn-mini {
  padding: 0 14px;
  border: 1px solid var(--gris-medio);
  background: var(--blanco);
  color: var(--azul-aag);
  border-radius: 8px;
  font-size: 0.85rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  text-decoration: none;
  transition: var(--transicion);
}
.btn-mini:hover {
  background: var(--azul-aag);
  color: var(--blanco);
  border-color: var(--azul-aag);
}

/* ====== Tarjeta de presentación virtual (Mi perfil) ====== */
.tarjeta-pres__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.tarjeta-pres__header h2 { margin: 0; }
.tarjeta-pres__header .btn--fantasma { font-size: 0.88rem; padding: 8px 16px; flex-shrink: 0; }
.tarjeta-pres {
  border: 1px solid var(--gris-medio);
  border-radius: 12px;
  padding: 22px 24px;
  background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
}
.tarjeta-pres__cabecera {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gris-medio);
}
.tarjeta-pres__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--azul-aag);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.tarjeta-pres__intro h3 { margin: 0 0 4px; color: var(--azul-aag); font-size: 1.25rem; }
.tarjeta-pres__profesion { color: var(--gris-texto); font-size: 0.95rem; }
.tarjeta-pres__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.tarjeta-pres__lista li {
  display: grid;
  grid-template-columns: 28px 110px 1fr;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  word-break: break-word;
}
.tarjeta-pres__icono { font-size: 1.05rem; }
.tarjeta-pres__label { color: var(--gris-texto); font-size: 0.85rem; }
.tarjeta-pres__servicios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.tarjeta-pres__servicios li {
  padding: 10px 14px;
  background: var(--gris-claro);
  border-radius: 8px;
  font-size: 0.92rem;
}
.info-cuenta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  align-items: start;
}
.campo-canales { grid-column: span 2; }
.lista-canales {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lista-canales__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--gris-claro);
  border: 1px solid var(--gris-medio);
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--gris-texto);
}
.lista-canales__icono {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.lista-canales__icono svg { width: 100%; height: 100%; }
.lista-canales__nombre { font-weight: 500; color: var(--azul-aag); }
.lista-canales__vacio {
  list-style: none;
  padding: 8px 12px;
  color: var(--gris-texto);
  font-style: italic;
  font-size: 0.88rem;
}
@media (max-width: 600px) {
  .campo-canales { grid-column: auto; }
}

/* ====== Bloque IA dentro de la esfera asistente ====== */
.bloque-ia {
  margin-top: 14px;
  border: 2px solid #7c3aed;
  background: linear-gradient(135deg, #f5edff 0%, #faf5ff 100%);
  border-radius: 12px;
  padding: 12px 14px;
}
.bloque-ia__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.bloque-ia__titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #5b21b6;
}
.bloque-ia__badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: #ede9fe;
  color: #5b21b6;
  font-size: 0.8rem;
  font-weight: 600;
}
.bloque-ia__badge--ok {
  background: #d1fae5;
  color: #065f46;
}
.bloque-ia__cuerpo { margin-top: 10px; }
.bloque-ia__nota {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: #6d28d9;
}
.bloque-ia__fila {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.bloque-ia__fila input[type="password"],
.bloque-ia__fila select {
  flex: 1;
  min-width: 160px;
  padding: 8px 10px;
  border: 1px solid #c4b5fd;
  border-radius: 8px;
  font-size: 0.88rem;
  background: var(--blanco);
  font-family: inherit;
}
.bloque-ia__fila input[type="password"] { font-family: 'JetBrains Mono', monospace; }
.bloque-ia__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #5b21b6;
  flex-shrink: 0;
}
.bloque-ia__btn-borrar { color: #b91c1c !important; border-color: #fca5a5 !important; }
.bloque-ia__btn-borrar:hover { background: #b91c1c !important; color: var(--blanco) !important; border-color: #b91c1c !important; }
.bloque-ia__btn-conectar { background: #16a34a !important; color: var(--blanco) !important; border-color: #15803d !important; }
.bloque-ia__btn-conectar:hover { background: #15803d !important; }
.bloque-ia__status {
  font-size: 0.82rem;
  margin: 6px 0 0;
  min-height: 1em;
}
@media (max-width: 600px) {
  .bloque-ia__head { flex-direction: column; align-items: flex-start; }
}

/* ====== Las 3 esferas de "Mi resumen" ======
   Cada bloque principal de Mi resumen es una "esfera" con borde grueso y
   color de fondo distintivo para que se distingan visualmente.            */
.esfera {
  border-width: 3px !important;
  border-style: solid !important;
  border-radius: 16px !important;
  padding: 22px 26px !important;
  position: relative;
}
.esfera > h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 10px;
  margin-top: 0;
  margin-bottom: 12px;
  background: var(--blanco);
  border: 1px solid currentColor;
  font-size: 1.05rem;
}
.esfera-asistente {
  border-color: #1f3a6b !important;
  background: linear-gradient(135deg, #eaf2ff 0%, #f8faff 100%) !important;
  color: #1f3a6b;
}
.esfera-asistente > h2 { color: #1f3a6b; border-color: #1f3a6b; }

.esfera-tarjeta {
  border-color: #5fa05f !important;
  background: linear-gradient(135deg, #effbe8 0%, #fbfff7 100%) !important;
  color: #2c6b2c;
}
.esfera-tarjeta > h2 { color: #2c6b2c; border-color: #5fa05f; }

.esfera-informe {
  border-color: #b45309 !important;
  background: linear-gradient(135deg, #fff6e6 0%, #fffaf0 100%) !important;
  color: #92400e;
}
.esfera-informe > h2 { color: #92400e; border-color: #b45309; }
.esfera-informe__sub {
  color: #92400e;
  opacity: 0.85;
  font-size: 0.9rem;
  margin: -6px 0 14px;
}

/* ====== Avatar / logo en Mi perfil ====== */
.tarjeta-pres__avatar--imagen {
  background: var(--blanco);
  padding: 4px;
  overflow: hidden;
}
.tarjeta-pres__avatar--imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ====== Bloque "Comparte tu tarjeta" + Mini-card visual + QR (Mi resumen) ====== */
.bloque-tarjeta__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: stretch;
}
.mini-card {
  background: linear-gradient(135deg, #ffffff 0%, #f4f8ff 100%);
  border: 1px solid var(--gris-medio);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 14px rgba(31, 58, 107, 0.08);
  position: relative;
  overflow: hidden;
}
.mini-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--azul-aag), #5fa05f);
}
.mini-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 4px;
}
.mini-card__logo {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: var(--azul-aag);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.4rem;
  flex-shrink: 0;
  overflow: hidden;
}
.mini-card__logo--imagen {
  background: var(--blanco);
  border: 1px solid var(--gris-medio);
  padding: 4px;
}
.mini-card__logo--imagen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mini-card__brand strong {
  display: block;
  font-size: 1.1rem;
  color: var(--azul-aag);
  line-height: 1.2;
  margin-bottom: 4px;
}
.mini-card__brand small {
  color: var(--gris-texto);
  font-size: 0.86rem;
}
.mini-card__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 0.92rem;
  border-top: 1px dashed var(--gris-medio);
  padding-top: 12px;
}
.mini-card__lista li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: center;
  word-break: break-word;
}
.mini-card__icono { font-size: 1rem; }
.mini-card__pie {
  font-size: 0.78rem;
  color: var(--gris-texto);
  text-align: right;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px dashed var(--gris-medio);
  font-style: italic;
}
.mini-card__qr-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ====== Logo upload (Configurar mi Secretario-IA) ====== */
.cfg-logo { margin-top: 14px; }
.cfg-logo__row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cfg-logo__preview {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  border: 2px dashed var(--gris-medio);
  background: var(--gris-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.cfg-logo__preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cfg-logo__placeholder {
  color: var(--gris-texto);
  font-size: 0.8rem;
  text-align: center;
  padding: 0 8px;
}
.cfg-logo__acciones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ====== QR vCard del cliente (Mi resumen) ====== */
.toggle-asistente__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
.qr-cliente {
  width: 144px;
  height: 144px;
  background: var(--blanco);
  border: 1px solid var(--gris-medio);
  border-radius: 10px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-cliente img {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}
.qr-cliente__pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.qr-cliente__pie small { color: var(--gris-texto); font-size: 0.8rem; }
.qr-cliente__pie .btn-mini { font-size: 0.78rem; padding: 4px 10px; height: auto; }

@media (max-width: 720px) {
  .toggle-asistente__qr { margin-left: 0; align-self: center; }
  .qr-cliente { width: 130px; height: 130px; }
  .tarjeta-pres__lista li { grid-template-columns: 24px 1fr; }
  .tarjeta-pres__lista li .tarjeta-pres__label { display: none; }
  .bloque-tarjeta__cuerpo {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .mini-card__qr-col { align-self: center; }
}

@media (max-width: 600px) {
  .dia-row { grid-template-columns: 90px 95px 1fr; gap: 8px; font-size: 0.85rem; }
  .dia-row__horas { font-size: 0.82rem; }
  .dia-row__horas input[type="time"] { padding: 5px 7px; }
}

/* ====== Toggle ON/OFF AAG ====== */
.toggle-asistente {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 26px !important;
  background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
  border: 1px solid var(--gris-medio);
}
.toggle-asistente__redes {
  background: var(--gris-claro);
  border-radius: 8px;
  padding: 14px 16px;
}
.toggle-redes__titulo {
  font-size: 0.92rem;
  color: var(--gris-texto);
  font-weight: 500;
  margin-bottom: 10px;
}
.toggle-redes__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.toggle-redes__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 10px;
  border: 2px solid var(--gris-medio);
  border-radius: 22px;
  background: var(--blanco);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gris-texto);
  transition: var(--transicion);
  -webkit-user-select: none;
  user-select: none;
  font-family: inherit;
}
.toggle-redes__chip:hover { border-color: var(--azul-aag-claro); }
.toggle-redes__chip-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.toggle-redes__chip-icon svg { width: 100%; height: 100%; }
.toggle-redes__chip.activo {
  border-color: var(--verde-aag);
  background: #e8f4e8;
  color: var(--azul-aag);
  font-weight: 600;
}
.toggle-redes__chip-tick {
  margin-left: 4px;
  color: var(--verde-aag);
  font-weight: 800;
  display: none;
}
.toggle-redes__chip.activo .toggle-redes__chip-tick { display: inline; }
.toggle-redes__todas {
  background: var(--azul-aag);
  color: var(--blanco);
  padding: 7px 14px;
  border: 2px solid var(--azul-aag);
  border-radius: 22px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  transition: var(--transicion);
}
.toggle-redes__todas:hover { background: var(--azul-aag-claro); border-color: var(--azul-aag-claro); }
.toggle-asistente__error {
  background: #fde2e2;
  color: #a73838;
  border: 1px solid #f5c2c2;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 500;
}
.toggle-asistente__head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 240px;
  /* padding-top extra para que los chips del robot (top: -18px) no salgan del marco */
  padding-top: 22px;
}
.toggle-asistente__icono { font-size: 2.2rem; line-height: 1; flex-shrink: 0; }
.toggle-asistente__texto { flex: 1; min-width: 0; }

/* Robot animado */
.robot-wrap {
  width: 140px;
  height: 200px;
  flex-shrink: 0;
  position: relative;
}

/* Avisos al lado del robot (hay clientes / sin clientes) — versión compacta */
/* !important para evitar que .toggle-asistente__icono { font-size: 2.2rem } herede. */
/* NOTA: no usar !important en `display` para que el inline style del JS pueda ocultarlos. */
.robot-wrap .robot-aviso {
  position: absolute !important;
  display: inline-flex;
  align-items: center !important;
  gap: 2px !important;
  padding: 1px 5px !important;
  border-radius: 999px !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  z-index: 3 !important;
  pointer-events: none !important;
  letter-spacing: 0.15px !important;
  line-height: 1 !important;
}
.robot-wrap .robot-aviso__emoji {
  font-size: 11px !important;
  line-height: 1 !important;
}
.robot-wrap .robot-aviso__txt {
  text-transform: uppercase !important;
  font-weight: 800 !important;
  font-size: 8px !important;
}

/* HAY CLIENTES: arriba a la derecha del robot, sirena rojo destellante intensa */
.robot-wrap .robot-aviso--hay {
  top: -18px !important;
  right: -18px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #ff0000, #990000) !important;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.6) !important;
  /* Triple animación: fondo (sirena) + halo grande + glow interno */
  animation: robotAvisoSirena 0.4s steps(2, end) infinite,
             robotAvisoHalo   0.6s ease-out infinite,
             robotAvisoGlow   0.4s ease-in-out infinite alternate !important;
}
/* Modo "revisado": chip rojo sin animación (después que el usuario abrió Conversaciones) */
.robot-wrap .robot-aviso--hay.robot-aviso--revisado {
  animation: none !important;
  background: linear-gradient(135deg, #d63333, #a02020) !important;
  opacity: 0.85 !important;
}
.robot-aviso--hay .robot-aviso__emoji {
  /* El emoji 🚨 sacude para reforzar el efecto alarma */
  animation: robotAvisoShake 0.3s ease-in-out infinite;
  display: inline-block;
}
/* Sirena: alterna entre rojo oscuro intenso y rojo brillante (steps duros) */
@keyframes robotAvisoSirena {
  0%   { background: linear-gradient(135deg, #ff0000, #990000); }
  100% { background: linear-gradient(135deg, #ff8a8a, #ff1f1f); }
}
/* Halo de destellos: 3 anillos concéntricos rojos expandiéndose */
@keyframes robotAvisoHalo {
  0% {
    box-shadow:
      0 0 0 0    rgba(255,   0,   0, 0.95),
      0 0 0 0    rgba(255,  40,  40, 0.7),
      0 0 0 0    rgba(255,  80,  80, 0.5),
      0 0 14px 4px rgba(255, 0, 0, 0.85);
  }
  100% {
    box-shadow:
      0 0 0 8px  rgba(255,   0,   0, 0),
      0 0 0 16px rgba(255,  40,  40, 0),
      0 0 0 24px rgba(255,  80,  80, 0),
      0 0 14px 4px rgba(255, 0, 0, 0.85);
  }
}
/* Glow interno: el chip mismo brilla más / menos para reforzar el latido */
@keyframes robotAvisoGlow {
  0%   { filter: brightness(1)   saturate(1.2); }
  100% { filter: brightness(1.4) saturate(1.6); }
}
@keyframes robotAvisoShake {
  0%, 100% { transform: rotate(-15deg) scale(1); }
  50%      { transform: rotate( 15deg) scale(1.2); }
}

/* SIN CLIENTES: abajo a la izquierda del robot, bandera blanca, estado calmo */
.robot-wrap .robot-aviso--sin {
  bottom: -14px !important;
  left: -18px !important;
  background: #ffffff !important;
  color: var(--gris-texto) !important;
  border: 1px solid var(--gris-medio) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* Responsive: en móvil los avisos se ubican debajo del robot apilados */
@media (max-width: 720px) {
  .robot-aviso {
    position: static;
    margin: 2px auto;
  }
}
.robot {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: center 70%;
}
.robot-eye, .robot-mouth, .robot-antenna {
  transform-box: fill-box;
  transform-origin: center;
}

/* Estado calmo (sin asistir): robot estático */
.toggle-asistente:not(.asistiendo) .robot-mouth { opacity: 0.55; }

/* Estado asistiendo: animaciones */
.toggle-asistente.asistiendo .robot { animation: robotBob 1.8s ease-in-out infinite; }
@keyframes robotBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.toggle-asistente.asistiendo .robot-antenna {
  animation: antennaPulse 1.1s ease-in-out infinite;
}
@keyframes antennaPulse {
  0%, 100% { transform: scale(1); fill: #5fa05f; }
  50% { transform: scale(1.45); fill: #7dd87d; }
}

.toggle-asistente.asistiendo .robot-eye {
  animation: eyeBlink 4.2s ease-in-out infinite;
}
@keyframes eyeBlink {
  0%, 88%, 92%, 100% { transform: scaleY(1); }
  90% { transform: scaleY(0.12); }
}

.toggle-asistente.asistiendo .robot-mouth {
  animation: mouthTalk 0.55s ease-in-out infinite;
}
@keyframes mouthTalk {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.35); }
}

/* Brazos del robot */
.robot-arm {
  transform-box: fill-box;
  transform-origin: 50% 0;
}
.toggle-asistente.asistiendo .robot-arm--right {
  animation: armWave 1.4s ease-in-out infinite;
}
.toggle-asistente.asistiendo .robot-arm--left {
  animation: armSwing 1.4s ease-in-out infinite;
}
@keyframes armWave {
  0%, 100% { transform: rotate(0deg); }
  35%, 65% { transform: rotate(-22deg); }
}
@keyframes armSwing {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(8deg); }
}

/* Nav icons (sidebar configura tu IA-AAG) */
.panel-side nav a.nav-config {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  white-space: normal;
  line-height: 1.3;
  padding: 9px 14px;
  font-size: 0.86rem;
}
.nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-flex;
  margin-top: 2px;
}
.nav-icon svg { width: 100%; height: 100%; }

/* Tarjetas placeholder de canales próximamente */
.proximamente-canal {
  text-align: center;
  padding: 40px 30px !important;
}
.proximamente-canal__icono {
  width: 80px;
  height: 80px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.proximamente-canal__icono svg { width: 100%; height: 100%; }
.proximamente-canal h2 {
  color: var(--azul-aag);
  margin-bottom: 12px;
}
.proximamente-canal > p {
  color: var(--gris-texto);
  max-width: 540px;
  margin: 0 auto 18px;
  line-height: 1.55;
}
.proximamente-tag {
  display: inline-block;
  background: linear-gradient(135deg, #fdf8ec, #fff5e0);
  color: #8a6d1a;
  border: 1px solid #e8d394;
  padding: 8px 18px;
  border-radius: 22px;
  font-weight: 600;
  font-size: 0.92rem;
  margin: 8px auto 14px;
}
.proximamente-detalle {
  font-size: 0.85rem !important;
  color: var(--gris-texto);
  max-width: 540px;
  margin: 0 auto !important;
}
.toggle-asistente__head strong {
  font-size: 1.15rem;
  color: var(--azul-aag);
  display: block;
}
.toggle-asistente__estado-actual {
  font-size: 0.85rem;
  color: var(--gris-texto);
  margin-top: 4px;
  font-weight: 500;
}
.toggle-asistente__botones {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn-asist {
  min-width: 220px;
  padding: 14px 22px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  line-height: 1.3;
  transition: var(--transicion);
  color: white;
}
.btn-asist small { display: block; font-size: 0.78rem; font-weight: 400; opacity: 0.9; margin-top: 2px; }
.btn-asist--verde { background: var(--verde-aag); }
.btn-asist--verde:hover { background: #4d8b4d; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(95, 160, 95, 0.3); }
.btn-asist--rojo { background: #d04444; }
.btn-asist--rojo:hover { background: #b03030; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(208, 68, 68, 0.3); }
.btn-asist.activo {
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08), 0 6px 16px rgba(0, 0, 0, 0.18);
  transform: scale(1.03);
}
.btn-asist:not(.activo) {
  opacity: 0.55;
  filter: grayscale(0.4);
}
.btn-asist:not(.activo):hover { opacity: 1; filter: none; }

/* Tablet: el robot pasa arriba centrado, texto debajo */
@media (max-width: 900px) {
  .toggle-asistente { flex-direction: column; align-items: stretch; }
  .toggle-asistente__head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    min-width: 0;
  }
  .robot-wrap { width: 120px; height: 172px; }
  .esfera { padding: 16px 18px !important; }
  .esfera > h2 { font-size: 1rem; padding: 4px 10px; }
}

/* Mobile chico: robot más compacto + botones en columna */
@media (max-width: 600px) {
  .robot-wrap { width: 100px; height: 142px; }
  .toggle-asistente__botones { flex-direction: column; }
  .btn-asist { min-width: 0; flex: 1; width: 100%; }
  .esfera { padding: 14px 14px !important; border-radius: 12px !important; }
  .esfera > h2 { font-size: 0.95rem; }
  .esfera-informe__sub { font-size: 0.85rem; }
}

/* ====== Lista de lugares de atención ====== */
.lugar-card {
  background: var(--blanco);
  border: 1px solid var(--gris-medio);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
}
.lugar-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.lugar-card__numero {
  width: 26px;
  height: 26px;
  background: var(--azul-aag);
  color: var(--blanco);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  flex-shrink: 0;
}
.lugar-card__nombre {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--gris-medio);
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  font-family: inherit;
}
.lugar-card__nombre:focus {
  outline: none;
  border-color: var(--azul-aag-claro);
}
.lugar-card__quitar {
  background: transparent;
  border: 1px solid var(--gris-medio);
  color: var(--gris-texto);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1rem;
}
.lugar-card__quitar:hover { background: #fde2e2; color: #a73838; border-color: #fde2e2; }
.lugar-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.lugar-card__grid input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--gris-medio);
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
}
.lugar-card__grid input:focus {
  outline: none;
  border-color: var(--azul-aag-claro);
}
.lugar-card__maps {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.lugar-card__maps input { flex: 1; padding: 8px 12px; border: 1px solid var(--gris-medio); border-radius: 6px; font-size: 0.85rem; font-family: inherit; }
.lugar-card__horario {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--gris-medio);
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
}
.lugar-card__horario:focus { outline: none; border-color: var(--azul-aag-claro); }
.lugar-card__label {
  font-size: 0.78rem;
  color: var(--gris-texto);
  font-weight: 500;
  margin-bottom: 4px;
  display: block;
}
@media (max-width: 600px) {
  .lugar-card__grid { grid-template-columns: 1fr; }
}

/* ====== Listas editables (servicios, reglas) ====== */
.lista-editable { display: flex; flex-direction: column; gap: 8px; }
.lista-item {
  display: flex;
  gap: 8px;
  align-items: center;
}
.lista-item input[type="text"], .lista-item input[type="number"] {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--gris-medio);
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
}
.lista-item input:focus {
  outline: none;
  border-color: var(--azul-aag-claro);
  box-shadow: 0 0 0 3px rgba(44, 85, 148, 0.1);
}
.lista-servicio {
  display: grid;
  grid-template-columns: 2fr 1fr 90px 36px;
  gap: 8px;
  align-items: center;
}
.btn-quitar {
  background: transparent;
  border: 1px solid var(--gris-medio);
  color: var(--gris-texto);
  width: 34px;
  height: 34px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transicion);
}
.btn-quitar:hover {
  background: #fde2e2;
  color: #a73838;
  border-color: #fde2e2;
}
.lista-vacia {
  padding: 16px;
  text-align: center;
  color: var(--gris-texto);
  font-size: 0.86rem;
  background: var(--gris-claro);
  border: 1px dashed var(--gris-medio);
  border-radius: 8px;
}
.reglas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.reglas-grid h4 {
  font-size: 0.95rem;
  margin-bottom: 8px;
  font-weight: 600;
}
.reglas-grid h4.si  { color: #2d6a2d; }
.reglas-grid h4.no  { color: #a73838; }

@media (max-width: 700px) {
  .reglas-grid { grid-template-columns: 1fr; gap: 18px; }
  .lista-servicio { grid-template-columns: 1fr 1fr 70px 36px; }
}

/* ====== 🎙️ Configura tu Secretario-IA para HOY (agenda por voz) ====== */
.midia-sub { color: var(--gris-texto); font-size: 0.93rem; margin: -6px 0 20px; max-width: 760px; }
.midia-layout { display: grid; grid-template-columns: 340px 1fr; gap: 26px; align-items: start; }
.midia-cal {
  background: var(--gris-claro);
  border: 1px solid var(--gris-medio);
  border-radius: 12px;
  padding: 14px;
}
.midia-cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.midia-cal__nav strong { font-size: 0.92rem; color: var(--texto-fuerte); }
.midia-cal__nav button {
  border: 1px solid var(--gris-medio); background: var(--blanco); border-radius: 8px;
  width: 30px; height: 30px; cursor: pointer; font-size: 0.95rem; color: var(--azul-aag); line-height: 1;
}
.midia-cal__nav button:hover { background: #eef2f7; }
.midia-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.midia-dow { text-align: center; font-size: 0.66rem; font-weight: 800; color: #94a3b8; padding: 3px 0; }
.midia-diaBtn {
  position: relative; border: none; background: var(--blanco); border-radius: 8px;
  padding: 8px 0 12px; font-size: 0.82rem; color: var(--texto-fuerte); cursor: pointer;
  transition: var(--transicion); font-family: inherit;
}
.midia-diaBtn:hover { background: #e8f4e8; }
.midia-diaBtn.es-hoy { outline: 2px solid var(--azul-aag); outline-offset: -2px; font-weight: 800; }
.midia-diaBtn.sel { background: var(--verde-aag); color: var(--blanco); font-weight: 800; }
.midia-diaBtn.sel .midia-dot { background: #fff; }
.midia-dot {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--verde-aag); display: inline-block;
}
.midia-cal__pie { margin-top: 10px; font-size: 0.72rem; color: var(--gris-texto); }
.midia-cal__pie .midia-dot { position: static; transform: none; vertical-align: 1px; margin-right: 5px; }
.midia-dia h3 { margin: 0 0 12px; color: var(--azul-aag); font-size: 1.15rem; }
.midia-controles { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
#midiaBtnMic.grabando { background: linear-gradient(135deg, #dc2626, #ef4444); animation: midiaPulso 1.4s ease-in-out infinite; }
@keyframes midiaPulso { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.45); } 50% { box-shadow: 0 0 0 10px rgba(220,38,38,0); } }
.midia-estado { font-size: 0.85rem; color: var(--gris-texto); font-weight: 600; }
#midiaTexto {
  width: 100%; border: 1px solid var(--gris-medio); border-radius: 10px;
  padding: 13px 15px; font-size: 0.95rem; font-family: inherit; color: var(--texto-fuerte);
  resize: vertical; line-height: 1.55; background: var(--blanco);
}
#midiaTexto:focus { outline: 2px solid var(--verde-aag-claro); border-color: var(--verde-aag); }
.midia-acciones { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.midia-hint {
  margin-top: 16px; background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: 10px; padding: 12px 15px; font-size: 0.85rem; color: #166534; line-height: 1.5;
}

/* ====== Responsive ====== */
@media (max-width: 880px) {
  .midia-layout { grid-template-columns: 1fr; }
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__acciones { justify-content: center; }
  .hero__titulo { font-size: 2rem; }
  .nav__menu a:not(.btn) { display: none; }
  .nav__brand img { height: 80px; }
  .nav__brand-text strong { font-size: 1.05rem; }
  .nav__brand-text span { font-size: 0.78rem; }
  .hero__logo-card img { max-height: 460px; }
  .footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .panel { flex-direction: column; }
  .panel-side {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 14px;
    gap: 10px;
  }
  .panel-side__brand {
    flex-direction: row;
    align-items: center;
    margin: 0;
    padding: 0;
    border: none;
    gap: 10px;
    text-align: left;
  }
  .panel-side__brand img { height: 40px; box-shadow: none; }
  .panel-side__brand strong { font-size: 0.95rem; }
  .panel-side__brand-full { display: none; }
  .panel-side nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin: 0 -14px;
    padding: 10px 14px 4px;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  .panel-side nav a {
    white-space: nowrap;
    padding: 8px 14px;
    flex-shrink: 0;
    font-size: 0.88rem;
    border-radius: 8px;
  }
  .panel-side__pie { display: none; }
  .panel-side nav a.nav-salir {
    margin-top: 0;
    border-top: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
  }
  .panel-main { padding: 20px 18px; }
  .plan--destacado { transform: none; }
}

/* ===== Panel admin: sección API Key Anthropic ===== */
.apk-desc {
  color: var(--gris-texto);
  margin: -4px 0 14px;
  font-size: 0.9rem;
}
.apk-aviso { margin-bottom: 18px; }
.apk-card {
  background: #fafbfd;
  padding: 18px;
  border-radius: 10px;
  margin-bottom: 18px;
}
.apk-label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
.apk-input-wrap { margin-bottom: 10px; }
.apk-estado {
  color: var(--gris-texto);
  font-size: 0.82rem;
}
.apk-acciones {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.apk-btn-borrar {
  color: #a73838;
  border-color: #a73838;
}
.apk-msg {
  display: none;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.88rem;
  margin-top: 14px;
}
.apk-msg--ok    { display: block; background: #e6f4e6; color: #2d6a2d; }
.apk-msg--error { display: block; background: #fde2e2; color: #a73838; }
.apk-resultados-titulo { margin: 0 0 10px; }
.apk-resultados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.apk-resultados .tarjeta__valor { font-size: 1.4rem; }
.apk-resultados small { color: var(--gris-texto); }