/* ==========================================================================
   GalisCloud Social & Remote Tools - Style System
   Colors: Navy (#0B1E2D), Teal (#00A896), Light Gray (#F4F7F6)
   ========================================================================== */

:root {
  --primary-navy: #0B1E2D;
  --navy-light: #183048;
  --accent-teal: #00A896;
  --teal-hover: #029383;
  --teal-light: #E6F6F4;
  --bg-main: #F4F7F6;
  --card-white: #FFFFFF;
  --text-dark: #2C3E50;
  --text-muted: #7F8C8D;
  --border-color: #E2E8F0;
  --success: #2ECC71;
  --warning: #F39C12;
  --danger: #E74C3C;
  --radius-sm: 8px;
  --radius-md: 12px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 15px rgba(0,0,0,0.08);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
}

body {
  background-color: var(--bg-main);
  color: var(--text-dark);
  line-height: 1.6;
}

/* Navbar */
.navbar {
  background-color: var(--card-white);
  border-bottom: 1px solid var(--border-color);
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.logo-icon {
  height: 36px;
  width: auto;
}

.logo-text {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
}

.logo-galis { color: var(--primary-navy); }
.logo-cloud { color: var(--accent-teal); }

.search-bar {
  flex: 0 1 400px;
  position: relative;
}

.search-bar input {
  width: 100%;
  padding: 8px 16px 8px 38px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-main);
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
}

.search-bar input:focus {
  border-color: var(--accent-teal);
  background-color: var(--card-white);
  box-shadow: 0 0 0 3px rgba(0, 168, 150, 0.15);
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.user-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-teal);
}

/* Main Layout Grid */
.container {
  max-width: 1300px;
  margin: 24px auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 260px 1fr 300px;
  gap: 24px;
}

/* Sidebar Styling */
.sidebar-box {
  background: var(--card-white);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

.sidebar-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-weight: 700;
}

.nav-menu {
  list-style: none;
}

.nav-item a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  color: var(--text-dark);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s;
  margin-bottom: 4px;
}

.nav-item a:hover, .nav-item.active a {
  background-color: var(--primary-navy);
  color: var(--card-white);
}

.channel-item a {
  color: var(--text-dark);
  font-weight: 500;
}

.channel-item a:hover {
  background-color: var(--teal-light);
  color: var(--accent-teal);
}

/* Feature Cards in Sidebar */
.feature-card {
  background: linear-gradient(135deg, var(--primary-navy) 0%, var(--navy-light) 100%);
  color: white;
  padding: 16px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  text-align: center;
}

.feature-card.teal-bg {
  background: linear-gradient(135deg, var(--accent-teal) 0%, var(--teal-hover) 100%);
}

.feature-card h4 {
  font-size: 15px;
  margin-bottom: 8px;
}

.feature-card p {
  font-size: 12px;
  opacity: 0.9;
  margin-bottom: 14px;
}

.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  text-align: center;
}

.btn-teal {
  background-color: var(--accent-teal);
  color: white;
}

.btn-teal:hover {
  background-color: var(--teal-hover);
}

.btn-navy {
  background-color: var(--primary-navy);
  color: white;
}

.btn-navy:hover {
  background-color: var(--navy-light);
}

.btn-block {
  display: block;
  width: 100%;
}

/* Feed & Create Post */
.create-post {
  background: var(--card-white);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  margin-bottom: 24px;
}

.create-post-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.create-post textarea {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px;
  resize: vertical;
  min-height: 70px;
  font-size: 14px;
  outline: none;
}

.create-post textarea:focus {
  border-color: var(--accent-teal);
}

.create-post-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.post-tools {
  display: flex;
  gap: 12px;
}

.tool-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  transition: color 0.2s;
}

.tool-btn:hover {
  color: var(--accent-teal);
}

/* Post Card */
.post-card {
  background: var(--card-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  margin-bottom: 20px;
  overflow: hidden;
}

.post-header {
  display: flex;
  align-items: center;
  padding: 16px;
  gap: 12px;
}

.post-author {
  font-weight: 700;
  font-size: 14px;
  color: var(--primary-navy);
}

.post-time {
  font-size: 12px;
  color: var(--text-muted);
}

.post-body {
  padding: 0 16px 16px 16px;
  font-size: 14px;
}

.post-image {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  display: block;
}

.post-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.action-btn:hover, .action-btn.active {
  color: var(--accent-teal);
}

/* Easy Helper Assistant / Remote Desktop Special Pages */
.hero-box {
  background: linear-gradient(135deg, var(--primary-navy), #102A43);
  color: white;
  padding: 30px;
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  box-shadow: var(--shadow-md);
}

.hero-box h1 {
  font-size: 26px;
  margin-bottom: 10px;

}

.wizard-card {
  background: white;
  padding: 24px;
  border-radius: var(--radius-md);
  border: 2px solid var(--accent-teal);
  margin-bottom: 20px;
}

.wizard-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--border-color);
}

.step-num {
  background: var(--accent-teal);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}

.pin-display {
  font-size: 36px;
  letter-spacing: 8px;
  font-weight: 900;
  color: var(--accent-teal);
  background: var(--teal-light);
  padding: 16px;
  text-align: center;
  border-radius: var(--radius-sm);
  margin: 16px 0;
  border: 2px dashed var(--accent-teal);
}

/* Code Snippet Box */
.code-box {
  background-color: #1E1E1E;
  color: #D4D4D4;
  padding: 14px;
  border-radius: var(--radius-sm);
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 11px;
  overflow-x: auto;
  line-height: 1.4;
  margin-top: 12px;
}

/* Responsive */
@media (max-width: 992px) {
  .container {
    grid-template-columns: 1fr;
  }
  .search-bar { display: none; }
}

/* ==========================================================================
   GalisConnect v4 — ampliación del sistema de estilos
   ========================================================================== */

/* ---------- Layout ---------- */
.page { min-height: calc(100vh - 130px); }

.container {
  grid-template-columns: 260px 1fr;   /* antes había una 3ª columna que no se usaba */
}
.container-ancho    { grid-template-columns: 280px 1fr; }
.container-estrecho { grid-template-columns: 1fr; max-width: 820px; }

.site-footer {
  max-width: 1300px;
  margin: 40px auto 0;
  padding: 20px 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.footer-links { display: flex; gap: 16px; }
.footer-links a { color: var(--text-muted); text-decoration: none; }
.footer-links a:hover { color: var(--accent-teal); }

/* ---------- Barra superior ---------- */
.logo-sub { font-size: 14px; font-style: italic; color: var(--accent-teal); font-weight: 400; margin-left: 4px; }

.nav-link {
  color: var(--text-dark); text-decoration: none; font-size: 13px; font-weight: 600;
  padding: 6px 8px; border-radius: var(--radius-sm); white-space: nowrap;
}
.nav-link:hover, .nav-link-on { color: var(--accent-teal); background: var(--teal-light); }

.user-chip { display: flex; align-items: center; gap: 10px; padding-left: 12px; border-left: 1px solid var(--border-color); }
.user-chip-info { display: flex; flex-direction: column; line-height: 1.2; }
.user-chip-name { font-size: 13px; font-weight: 700; color: var(--primary-navy); }

/* ---------- Botones extra ---------- */
.btn-sm     { padding: 6px 12px; font-size: 12px; }
.btn-xs     { padding: 4px 9px;  font-size: 11px; }
.btn-grande { padding: 14px; font-size: 15px; }
.btn-gris   { background: #E7ECEA; color: var(--text-dark); }
.btn-gris:hover { background: #DAE2DF; }
.btn-warn   { background: var(--warning); color: #1a1a1a; }
.btn-warn:hover { background: #E08E0B; }
.btn-peligro{ background: var(--danger); color: #fff; }
.btn-peligro:hover { background: #C0392B; }
.icon-btn { background: none; border: none; cursor: pointer; font-size: 20px; color: var(--text-muted); line-height: 1; padding: 0 6px; }
.icon-btn:hover { color: var(--primary-navy); }
.link-peligro { background: none; border: none; color: var(--danger); font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; }

/* ---------- Avisos ---------- */
.alert {
  padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px;
  font-size: 14px; font-weight: 600; border-left: 4px solid;
}
.alert-ok    { background: #E8F8F0; color: #1E8449; border-color: var(--success); }
.alert-warn  { background: #FEF5E7; color: #9C640C; border-color: var(--warning); }
.alert-error { background: #FDEDEC; color: #A93226; border-color: var(--danger); }

/* ---------- Anuncios ---------- */
.anuncio {
  color: #fff; padding: 20px; border-radius: var(--radius-md); margin-bottom: 20px;
  box-shadow: var(--shadow-sm); border-left: 5px solid var(--accent-teal);
  background: linear-gradient(135deg, var(--navy-light), var(--primary-navy));
}
.anuncio h3 { margin-bottom: 8px; font-size: 17px; }
.anuncio p  { font-size: 14px; opacity: .92; }
.anuncio-fecha { display: block; margin-top: 10px; font-size: 11px; opacity: .6; }
.anuncio-aviso   { background: linear-gradient(135deg, #B9770E, #7E5109); border-left-color: var(--warning); }
.anuncio-urgente { background: linear-gradient(135deg, #C0392B, #7B241C); border-left-color: #F5B7B1; }

/* ---------- Formularios ---------- */
.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 5px; color: var(--primary-navy); }
.campo input[type=text], .campo input[type=email], .campo input[type=password],
.campo input[type=number], .campo input[type=search], .campo input[type=tel],
.campo input[type=url], .campo input[type=file], .campo select, .campo textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); font-size: 14px; background: #fff;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--accent-teal); box-shadow: 0 0 0 3px rgba(0,168,150,.15);
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid2-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.input-linea {
  width: 100%; padding: 9px 12px; margin-bottom: 10px; font-size: 14px;
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
}
.input-xs { width: 130px; padding: 4px 7px; font-size: 11px; border: 1px solid var(--border-color); border-radius: 5px; }

/* Los campos que van sueltos por el panel (fuera de un .campo) salían con el
   borde cuadrado por defecto del navegador y desentonaban con todo lo demás.
   Aquí se les da el mismo aspecto. */
.form-inline-ancho input,
.campo-con-boton input,
.campo-con-boton select {
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: #fff;
  color: var(--text-dark);
  min-width: 0;
}
.form-inline-ancho input:focus,
.campo-con-boton input:focus,
.campo-con-boton select:focus {
  outline: none;
  border-color: var(--accent-teal);
  box-shadow: 0 0 0 3px rgba(0,168,150,.15);
}
.select-mini { padding: 6px 10px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 13px; }
.file-label { font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; }
.file-label:hover { color: var(--accent-teal); }
.file-nombre { font-weight: 400; font-style: italic; }
.check-linea { display: flex; align-items: center; gap: 9px; font-size: 14px; margin-bottom: 10px; cursor: pointer; }
.form-inline { display: inline; }
.form-inline select { padding: 4px 6px; font-size: 12px; border-radius: 5px; border: 1px solid var(--border-color); }

/* ---------- Feed ---------- */
.feed-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.feed-head h3 { color: var(--primary-navy); font-size: 17px; }
.filtros, .paginacion { display: flex; gap: 8px; flex-wrap: wrap; }
.paginacion { justify-content: center; margin: 24px 0; }
.chip {
  padding: 5px 13px; border-radius: 20px; font-size: 12px; font-weight: 700;
  background: #fff; border: 1px solid var(--border-color); color: var(--text-muted); text-decoration: none;
}
.chip:hover { border-color: var(--accent-teal); color: var(--accent-teal); }
.chip-on { background: var(--accent-teal); border-color: var(--accent-teal); color: #fff; }

.post-interno { border: 2px dashed var(--danger); }
.post-header  { position: relative; }
.post-menu    { margin-left: auto; position: relative; }
.menu-desplegable {
  display: none; position: absolute; right: 0; top: 26px; z-index: 20; min-width: 150px;
  background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); overflow: hidden;
}
.menu-desplegable.abierto { display: block; }
.menu-item {
  display: block; width: 100%; text-align: left; padding: 10px 14px; font-size: 13px;
  background: none; border: none; cursor: pointer; color: var(--text-dark);
}
.menu-item:hover { background: var(--bg-main); }
.menu-item-peligro { color: var(--danger); }

.tag-interno { color: var(--danger); font-size: 11px; font-weight: 700; background: #FADBD8; padding: 2px 6px; border-radius: 4px; margin-left: 8px; }
.post-imagen { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--radius-sm); margin-top: 12px; display: block; }
.form-editar textarea { width: 100%; min-height: 90px; padding: 10px; border: 1px solid var(--accent-teal); border-radius: var(--radius-sm); margin-bottom: 10px; font-size: 14px; }

.badge {
  display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; padding: 2px 7px; border-radius: 20px; vertical-align: middle;
}
.badge-admin     { background: #FADBD8; color: #A93226; }
.badge-tecnico   { background: var(--teal-light); color: var(--accent-teal); }
.badge-user      { background: #E8EDF2; color: var(--text-muted); }
.badge-visitante { background: #F0F0F0; color: #999; }
.badge-ok        { background: #E8F8F0; color: #1E8449; }
.badge-no        { background: #FADBD8; color: #A93226; }
.badge-warn      { background: #FEF5E7; color: #9C640C; }
.badge-gris      { background: #ECEFF1; color: #78909C; }

.vacio { text-align: center; padding: 40px 20px; color: var(--text-muted); background: #fff; border-radius: var(--radius-md); border: 1px dashed var(--border-color); }
.texto-mudo { color: var(--text-muted); font-size: 13px; }
.volver { display: inline-block; margin-bottom: 14px; font-size: 13px; color: var(--text-muted); text-decoration: none; }
.volver:hover { color: var(--accent-teal); }

/* ---------- Comentarios ---------- */
.comentario { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border-color); }
.comentario:last-of-type { border-bottom: none; }
.comentario-cuerpo { flex: 1; }
.comentario-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.comentario-meta b { color: var(--primary-navy); font-size: 13px; }
.comentario p { font-size: 14px; }
.form-comentario { margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--bg-main); }
.form-comentario textarea {
  width: 100%; min-height: 76px; padding: 11px; border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 10px; resize: vertical;
}
.form-comentario textarea:focus { outline: none; border-color: var(--accent-teal); }

.avatar-sm { width: 32px; height: 32px; }
.avatar-xl { width: 84px; height: 84px; border-width: 3px; }

/* ---------- Perfil ---------- */
.perfil-cabecera {
  display: flex; gap: 20px; align-items: center; background: #fff; padding: 24px;
  border-radius: var(--radius-md); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); margin-bottom: 20px;
}
.perfil-cabecera h1 { font-size: 22px; color: var(--primary-navy); }
.lista-simple { list-style: none; margin-top: 10px; }
.lista-simple li { padding: 9px 0; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.lista-simple a { color: var(--primary-navy); text-decoration: none; }
.lista-simple a:hover { color: var(--accent-teal); }

/* ---------- Estadísticas ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.stats-grid-4 { grid-template-columns: repeat(4, 1fr); }
.stat-card {
  background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: 18px; text-align: center; box-shadow: var(--shadow-sm);
}
.stat-card b { display: block; font-size: 24px; color: var(--accent-teal); line-height: 1.2; }
.stat-card span { font-size: 12px; color: var(--text-muted); }
.stat-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; }
.stat-row b { color: var(--primary-navy); }

/* ---------- Tablas ---------- */
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 12px; }
.tabla th { background: var(--primary-navy); color: #fff; text-align: left; padding: 10px; font-size: 12px; }
.tabla td { padding: 10px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.tabla tr:hover td { background: #FAFCFB; }
.acciones { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.subtitulo { margin: 22px 0 8px; font-size: 14px; color: var(--primary-navy); text-transform: uppercase; letter-spacing: .5px; }
.bloque-editable { border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 12px; }
.bloque-editable summary { cursor: pointer; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.diag-linea { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-color); font-size: 13px; }
.borde-teal { border: 2px solid var(--accent-teal); }

/* ---------- Ayuda ---------- */
.buscador-ayuda { display: flex; gap: 10px; flex-wrap: wrap; }
.buscador-ayuda input {
  flex: 1; min-width: 220px; padding: 11px 14px; border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); font-size: 14px;
}
.opciones-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-bottom: 24px; }
.trouble-option {
  text-align: left; padding: 16px; background: var(--bg-main); border-radius: var(--radius-sm);
  cursor: pointer; border: 1px solid var(--border-color); transition: all .2s; font: inherit;
}
.trouble-option:hover { border-color: var(--accent-teal); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.trouble-option.elegida { border: 2px solid var(--accent-teal); background: var(--teal-light); }
.trouble-option h3 { font-size: 15px; color: var(--primary-navy); margin-bottom: 6px; }
.trouble-option p  { font-size: 13px; color: var(--text-muted); }

.solucion { background: var(--teal-light); padding: 22px; border-radius: var(--radius-sm); border-left: 5px solid var(--accent-teal); }
.solucion h3 { color: var(--primary-navy); margin-bottom: 16px; }
.solucion .wizard-step { cursor: pointer; align-items: center; }
.solucion .wizard-step:hover { background: rgba(255,255,255,.5); border-radius: var(--radius-sm); }
.paso-check { width: 20px; height: 20px; accent-color: var(--accent-teal); cursor: pointer; flex-shrink: 0; }
.step-texto { font-size: 14px; }
.paso-hecho .step-texto { text-decoration: line-through; opacity: .55; }
.paso-hecho .step-num { background: var(--success); }
.progreso-ayuda { margin-bottom: 18px; }
.progreso-texto { font-size: 12px; font-weight: 700; color: var(--accent-teal); }
.progreso-barra { height: 8px; background: #fff; border-radius: 6px; overflow: hidden; margin-top: 6px; }
.progreso-relleno { height: 100%; width: 0; background: var(--accent-teal); transition: width .3s; }
.solucion-pie { margin-top: 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.solucion-pie > .btn { display: inline-block; }
.mensaje-resuelto { background: var(--success); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; }
.lista-avisos { list-style: none; font-size: 13px; line-height: 1.9; }
.lista-numerada { padding-left: 18px; font-size: 13px; line-height: 1.8; }

/* ---------- Acceso remoto ---------- */
.hero-teal { background: linear-gradient(135deg, var(--accent-teal), var(--teal-hover)); }
.card-navy { border-color: var(--primary-navy); }
.estado-servicio { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--success); margin-bottom: 10px; }
.punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.punto-ok { background: var(--success); box-shadow: 0 0 0 0 rgba(46,204,113,.6); animation: latido 2s infinite; }
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(46,204,113,.6); }
  70%  { box-shadow: 0 0 0 9px rgba(46,204,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}
.input-pin { text-align: center; font-size: 22px; letter-spacing: 6px; font-weight: 800; }
.pin-caducidad { text-align: center; font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.pin-status { text-align: center; font-size: 13px; font-weight: 700; margin: 10px 0; padding: 9px; border-radius: var(--radius-sm); }
.estado-ok    { color: #1E8449; background: #E8F8F0; }
.estado-warn  { color: #9C640C; background: #FEF5E7; }
.estado-error { color: #A93226; background: #FDEDEC; }
.pin-mini { background: var(--primary-navy); color: var(--accent-teal); padding: 3px 8px; border-radius: 5px; font-weight: 800; letter-spacing: 2px; }
.nota-pequena { font-size: 12px; color: var(--text-muted); margin-top: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .container, .container-ancho, .container-estrecho { grid-template-columns: 1fr; }
  .grid2, .grid3, .grid2-cards, .stats-grid, .stats-grid-4 { grid-template-columns: 1fr; }
  .user-chip-info { display: none; }
  .navbar { flex-wrap: wrap; gap: 10px; }
  .tabla { display: block; overflow-x: auto; white-space: nowrap; }
}
@media (max-width: 600px) {
  .stats-grid, .stats-grid-4 { grid-template-columns: 1fr 1fr; }
  .pin-display { font-size: 26px; letter-spacing: 4px; }
  .perfil-cabecera { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   GalisConnect v4.1 — sala remota, comentarios en el feed y panel ampliado
   ========================================================================== */

.oculto { display: none !important; }

/* ---------- Comentarios dentro del feed ---------- */
.post-comentarios { border-top: 1px solid var(--border-color); padding: 12px 16px 16px; background: #FBFDFC; }
.comentario-mini { padding: 8px 0; border-bottom: none; }
.comentario-mini p { font-size: 13px; }
.ver-todos { display: inline-block; font-size: 12px; font-weight: 700; color: var(--accent-teal); text-decoration: none; margin: 4px 0 10px; }
.ver-todos:hover { text-decoration: underline; }

.form-comentario-rapido { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.form-comentario-rapido .input-comentario {
  flex: 1; min-width: 180px; padding: 9px 14px; border-radius: 20px;
  border: 1px solid var(--border-color); font-size: 13px; background: #fff;
}
.form-comentario-rapido .input-comentario:focus { outline: none; border-color: var(--accent-teal); }
.input-nombre-mini {
  width: 130px; padding: 9px 12px; border-radius: 20px;
  border: 1px solid var(--border-color); font-size: 13px;
}

/* ---------- Página de solicitud ---------- */
.solicitud-card #pin-acciones { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* ---------- Sala de asistencia ---------- */
.sala-wrap { max-width: 1180px; }
.sala-cabecera {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: 20px; margin-bottom: 18px; box-shadow: var(--shadow-sm);
}
.sala-cabecera h1 { font-size: 21px; color: var(--primary-navy); margin-bottom: 4px; }
.sala-estado {
  display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700;
  background: var(--bg-main); padding: 9px 14px; border-radius: 20px; white-space: nowrap;
}
.punto-espera { background: var(--warning); }
.punto-error  { background: var(--danger); }

.sala-grid { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }

.sala-video-box {
  background: #fff; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 16px; box-shadow: var(--shadow-sm);
}
.sala-video-marco {
  position: relative; background: #0B1E2D; border-radius: var(--radius-sm);
  aspect-ratio: 16 / 9; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
#sala-video { width: 100%; height: 100%; object-fit: contain; display: none; background: #000; }
#sala-video.activo { display: block; }
.sala-video-vacio { color: #fff; text-align: center; padding: 24px; }
.sala-video-vacio p { font-size: 14px; opacity: .9; margin-bottom: 4px; }
.sala-video-vacio .texto-mudo { color: #8CA3B5; }
.icono-grande { font-size: 46px; margin-bottom: 10px; }
.sala-controles { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.sala-lateral { display: flex; flex-direction: column; gap: 16px; }
.sala-panel {
  background: #fff; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 16px; box-shadow: var(--shadow-sm);
}
.sala-panel h3 { font-size: 15px; color: var(--primary-navy); margin-bottom: 10px; }

.chat-mensajes {
  height: 230px; overflow-y: auto; background: var(--bg-main);
  border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px; font-size: 13px;
}
.chat-msg { margin-bottom: 10px; padding: 8px 11px; border-radius: 10px; max-width: 90%; }
.chat-msg b { display: block; font-size: 11px; opacity: .7; margin-bottom: 2px; }
.chat-msg p { word-break: break-word; }
.chat-mio   { background: var(--teal-light); margin-left: auto; }
.chat-otro  { background: #fff; border: 1px solid var(--border-color); }
.chat-aviso { background: #FEF5E7; color: #9C640C; font-size: 12px; font-weight: 600; max-width: 100%; }
.chat-form { display: flex; gap: 8px; }
.chat-form input {
  flex: 1; padding: 9px 12px; border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); font-size: 13px;
}
.chat-form input:focus { outline: none; border-color: var(--accent-teal); }

.dato-copiable {
  display: flex; align-items: center; gap: 8px; padding: 8px 0;
  border-bottom: 1px solid var(--border-color); font-size: 13px;
}
.dato-etiqueta { color: var(--text-muted); min-width: 78px; font-size: 12px; }
.dato-copiable b { flex: 1; font-family: 'Consolas', monospace; word-break: break-all; }

/* ---------- Panel: acceso del técnico ---------- */
.acceso-tecnico { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; margin-top: 14px; }
.acceso-tecnico .input-pin {
  flex: 1; min-width: 190px; padding: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sm);
}

/* ---------- Panel: gestión de publicaciones ---------- */
.barra-lote {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--bg-main); padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 12px;
}
.fila-editor td { background: #FBFDFC; }
.editor-post { padding: 12px 4px; }
.editor-post label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 6px; color: var(--primary-navy); }
.editor-post textarea {
  width: 100%; padding: 10px; border: 1px solid var(--accent-teal);
  border-radius: var(--radius-sm); font-size: 14px; white-space: pre-wrap;
}
.miniatura { max-width: 220px; border-radius: var(--radius-sm); margin-top: 12px; display: block; }
.editor-comentarios { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-color); font-size: 13px; }
.editor-comentario {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--border-color);
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .sala-grid { grid-template-columns: 1fr; }
  .chat-mensajes { height: 180px; }
}

/* ==========================================================================
   GalisConnect v4.3 — solicitudes, registro, autoría y descarga
   ========================================================================== */

/* ---------- Aviso de pendientes en el menú ---------- */
.pastilla-aviso {
  display: inline-block; margin-left: auto; min-width: 20px; padding: 1px 7px;
  background: var(--danger); color: #fff; border-radius: 20px;
  font-size: 11px; font-weight: 800; text-align: center;
}
.nav-item a { justify-content: flex-start; }

/* ---------- Quién ha dado me gusta ---------- */
.lista-megusta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 16px; border-top: 1px solid var(--border-color); background: #FBFDFC;
}
.pastilla-persona {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--border-color); border-radius: 20px;
  padding: 3px 11px 3px 3px; font-size: 12px; font-weight: 600; color: var(--primary-navy);
}
.pastilla-persona img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

/* ---------- Solicitudes de cuenta ---------- */
.solicitud-card {
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  padding: 16px; margin-bottom: 14px; background: #fff;
}
.solicitud-cab { display: flex; gap: 12px; align-items: flex-start; }
.solicitud-motivo {
  margin: 12px 0 0; padding: 10px 14px; background: var(--bg-main);
  border-left: 3px solid var(--accent-teal); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px; font-style: italic; color: var(--text-dark);
}
.solicitud-acciones {
  display: flex; flex-direction: column; gap: 10px; margin-top: 14px;
  padding-top: 14px; border-top: 1px dashed var(--border-color);
}
.solicitud-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Registro de sucesos ---------- */
.filtros-registro {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  background: var(--bg-main); padding: 12px 14px; border-radius: var(--radius-sm); margin: 16px 0;
}
.filtros-registro select,
.filtros-registro input {
  padding: 8px 11px; border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); font-size: 13px; background: #fff;
}
.filtros-registro input[type=search] { flex: 1; min-width: 160px; }

.tabla-registro { font-size: 12.5px; }
.tabla-registro td { vertical-align: top; }
.celda-fecha { white-space: nowrap; }
.codigo-accion {
  font-family: 'Consolas', monospace; font-size: 11px;
  background: var(--bg-main); padding: 1px 5px; border-radius: 4px; color: var(--text-muted);
}
.tabla-registro tr.nivel-aviso  td { background: #FFFCF5; }
.tabla-registro tr.nivel-alerta td { background: #FEF6F5; }
.tabla-registro tr.nivel-alerta td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.tabla-registro tr.nivel-aviso  td:first-child { box-shadow: inset 3px 0 0 var(--warning); }

/* ---------- Descarga del programa remoto ---------- */
.tarjeta-descarga { border-color: var(--border-color); }
.descarga-principal { margin: 16px 0; }
.descarga-detectado {
  font-size: 13px; color: var(--text-muted); margin-bottom: 10px; text-align: center;
}
.descarga-pasos { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border-color); }
.lista-archivos { list-style: none; margin: 10px 0; }
.lista-archivos li {
  padding: 9px 12px; margin-bottom: 6px; font-size: 13px;
  border-radius: var(--radius-sm); background: var(--bg-main); border: 1px solid transparent;
}
.lista-archivos li.destacado {
  background: var(--teal-light); border-color: var(--accent-teal); font-weight: 500;
}
.descarga-avisos { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border-color); }
.descarga-avisos p { font-size: 14px; margin-bottom: 8px; }

@media (max-width: 992px) {
  .filtros-registro select, .filtros-registro input { flex: 1; min-width: 130px; }
}

/* ==========================================================================
   GalisConnect v4.4 — notificaciones, datos de control y móvil
   ========================================================================== */

/* ---------- Campana ---------- */
.campana-caja { position: relative; }
.campana {
  background: none; border: none; cursor: pointer; font-size: 20px;
  line-height: 1; padding: 8px; border-radius: 50%; position: relative;
  min-width: 44px; min-height: 44px;
}
.campana:hover { background: var(--bg-main); }
.campana-contador {
  position: absolute; top: 2px; right: 2px;
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 800;
  min-width: 18px; padding: 1px 5px; border-radius: 20px; line-height: 16px;
  border: 2px solid #fff;
}
.campana-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 200;
  width: 360px; max-width: calc(100vw - 24px);
  background: #fff; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); overflow: hidden;
}
.campana-cab {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--border-color); background: var(--bg-main);
  font-size: 14px;
}
.link-mini {
  background: none; border: none; color: var(--accent-teal);
  font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;
}
.link-mini:hover { text-decoration: underline; }
.campana-lista { max-height: 60vh; overflow-y: auto; }
.campana-pie {
  display: block; text-align: center; padding: 11px; font-size: 13px; font-weight: 600;
  color: var(--accent-teal); text-decoration: none; border-top: 1px solid var(--border-color);
  background: var(--bg-main);
}

/* ---------- Un aviso, en la campana y en el panel ---------- */
.aviso-item, .aviso-fila {
  display: flex; gap: 11px; padding: 12px 14px; text-decoration: none;
  color: var(--text-dark); border-bottom: 1px solid var(--border-color);
}
.aviso-item:hover, .aviso-fila:hover { background: var(--bg-main); }
.aviso-item b, .aviso-fila b { display: block; font-size: 13px; color: var(--primary-navy); }
.aviso-item p, .aviso-fila p { font-size: 12.5px; color: var(--text-muted); margin: 2px 0; }
.aviso-icono { font-size: 18px; flex-shrink: 0; line-height: 1.4; }
.aviso-cuando { font-size: 11px; color: var(--text-muted); }
.aviso-nuevo { background: #F2FBFA; box-shadow: inset 3px 0 0 var(--accent-teal); }
.aviso-item.nivel-aviso,  .aviso-fila.nivel-aviso  { box-shadow: inset 3px 0 0 var(--warning); }
.aviso-item.nivel-alerta, .aviso-fila.nivel-alerta { box-shadow: inset 3px 0 0 var(--danger); }
.lista-avisos-panel { border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; }
.lista-avisos-panel .aviso-fila:last-child { border-bottom: none; }
.aviso-cuerpo { flex: 1; min-width: 0; }

/* ---------- Sesión abierta con datos de control ---------- */
.sesion-activa {
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  padding: 14px; margin-bottom: 12px; background: #fff;
}
.sesion-cab { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sesion-control {
  margin-top: 12px; padding: 12px 14px; background: var(--teal-light);
  border-radius: var(--radius-sm); border-left: 4px solid var(--accent-teal);
}
.sesion-control-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; }
.sesion-sin-datos { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-color); }

/* ---------- Botón de menú (solo móvil) ---------- */
.btn-menu {
  display: none; background: none; border: none; cursor: pointer;
  width: 44px; height: 44px; padding: 10px; flex-direction: column;
  justify-content: space-between; flex-shrink: 0;
}
.btn-menu span {
  display: block; height: 2.5px; width: 100%; background: var(--primary-navy);
  border-radius: 2px; transition: transform .22s, opacity .22s;
}
.btn-menu.abierto span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.btn-menu.abierto span:nth-child(2) { opacity: 0; }
.btn-menu.abierto span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
.solo-movil { display: none !important; }

/* ==========================================================================
   MÓVIL
   ========================================================================== */
@media (max-width: 860px) {
  .solo-movil { display: block !important; }
  .btn-menu   { display: flex; }

  /* La barra superior pasa a dos filas: logo + acciones, y debajo el buscador */
  .navbar { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .logo-container { flex: 1; min-width: 0; }
  .logo-text { font-size: 18px; }
  .logo-sub  { display: none; }
  .search-bar { order: 10; flex: 1 1 100%; display: block; }

  /* El menú se despliega por debajo de la barra */
  .user-nav {
    order: 5; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-md); padding: 8px; display: none;
  }
  .user-nav.abierto { display: flex; }
  .user-nav .nav-link, .user-nav .btn { width: 100%; text-align: left; padding: 13px 14px; font-size: 15px; }
  .user-chip { border-left: none; border-top: 1px solid var(--border-color);
               padding: 10px 4px 4px; margin-top: 6px; }
  .user-chip-info { display: flex; }
  .campana-caja { align-self: flex-start; }
  .campana-panel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }

  /* El lateral del panel se pliega */
  .sidebar { display: none; }
  .sidebar.abierto { display: block; }

  /* Contenido a ancho completo */
  .container, .container-ancho, .container-estrecho { padding: 0 12px; margin-top: 16px; gap: 14px; }
  .wizard-card { padding: 16px; }
  .hero-box { padding: 20px; }
  .hero-box h1 { font-size: 20px; }

  /* Zonas de toque cómodas */
  .btn { padding: 12px 16px; font-size: 14px; }
  .btn-sm { padding: 10px 14px; }
  .btn-xs { padding: 8px 11px; font-size: 12px; }
  .action-btn { padding: 8px 4px; font-size: 14px; }
  .chip { padding: 9px 15px; font-size: 13px; }
  input, select, textarea { font-size: 16px !important; }  /* evita el zoom de iOS */

  /* Las tablas del panel se leen como fichas */
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla { white-space: normal; }
  .tabla tr:first-child { display: none; }          /* la cabecera no aporta aquí */
  .tabla tr {
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    padding: 12px; margin-bottom: 10px; background: #fff;
  }
  .tabla td { border: none; padding: 4px 0; }
  .tabla td:empty { display: none; }
  .acciones { justify-content: flex-start; padding-top: 8px; }

  /* El registro sí conserva su tabla, con desplazamiento lateral */
  .tabla-registro, .tabla-registro tbody, .tabla-registro tr, .tabla-registro td { display: revert; }
  .tabla-registro { display: block; overflow-x: auto; white-space: nowrap; }
  .tabla-registro tr:first-child { display: revert; }
  .tabla-registro td { border-bottom: 1px solid var(--border-color); padding: 8px; }

  .filtros-registro { flex-direction: column; align-items: stretch; }
  .filtros-registro select, .filtros-registro input, .filtros-registro .btn { width: 100%; }

  .form-comentario-rapido { flex-direction: column; align-items: stretch; }
  .form-comentario-rapido .btn { width: 100%; }
  .input-nombre-mini { width: 100%; }

  .solicitud-form { flex-direction: column; align-items: stretch; }
  .solicitud-form .btn, .solicitud-form select, .solicitud-form input { width: 100%; }

  .sala-cabecera { flex-direction: column; }
  .sala-controles .btn { flex: 1 1 100%; }
  .acceso-tecnico { flex-direction: column; }
  .acceso-tecnico .btn { width: 100%; }

  .perfil-cabecera { flex-direction: column; text-align: center; }
  .barra-lote { flex-direction: column; align-items: stretch; }
  .barra-lote .btn, .barra-lote select { width: 100%; }
  .stats-grid, .stats-grid-4 { grid-template-columns: 1fr 1fr; }
  .opciones-grid { grid-template-columns: 1fr; }
  .site-footer { flex-direction: column; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
  .pin-display { font-size: 30px; letter-spacing: 6px; }
}

@media (max-width: 420px) {
  /* Dos columnas incluso aquí: apiladas ocupan pantalla y media para nada */
  .stats-grid, .stats-grid-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 12px 8px; }
  .stat-card b { font-size: 20px; }
  .logo-text { font-size: 16px; }
  .pin-display { font-size: 26px; letter-spacing: 4px; }
}

/* ---------- Contención del ancho ----------
   Un hijo de grid tiene min-width:auto por defecto, así que una tabla ancha
   estira toda la página en vez de desplazarse dentro de su tarjeta. */
.container > *,
.container-ancho > *,
.container-estrecho > *,
.page main,
.feed { min-width: 0; }

.wizard-card, .post-card, .sidebar-box { max-width: 100%; overflow-wrap: anywhere; }
.tabla-registro { max-width: 100%; }

@media (max-width: 860px) {
  /* Objetivos de toque mínimos: cuesta acertar con el dedo por debajo de 40px */
  .link-mini, .link-peligro, .ver-todos { display: inline-block; padding: 10px 4px; }
  .icon-btn { min-width: 40px; min-height: 40px; }
  .chip { min-height: 38px; display: inline-flex; align-items: center; }
  .action-btn { min-height: 40px; }
  .campana { min-width: 46px; min-height: 46px; }
  .paso-check { width: 24px; height: 24px; }

  /* Nada puede empujar la página a lo ancho */
  html, body { overflow-x: hidden; }
  img, video, table, pre, code { max-width: 100%; }
  .perfil-cabecera { padding: 18px 14px; }
  .avatar-xl { width: 72px; height: 72px; }
}

@media (max-width: 860px) {
  /* También los botones diminutos de las tablas: 30px es poco para un dedo */
  .btn-xs { padding: 10px 12px; font-size: 12px; min-height: 40px;
            display: inline-flex; align-items: center; justify-content: center; }
  .input-xs { min-height: 40px; font-size: 15px !important; }
}

/* ==========================================================================
   GalisConnect v4.5 — foto de perfil y publicaciones guardadas
   ========================================================================== */

/* ---------- Foto de perfil ---------- */
.foto-caja { text-align: center; flex-shrink: 0; }

.foto-marco {
  position: relative; display: inline-block; cursor: pointer;
  border-radius: 50%; transition: transform .18s;
}
.foto-marco:hover { transform: scale(1.03); }
.foto-marco .avatar-xl {
  display: block; width: 104px; height: 104px; object-fit: cover;
  border: 3px solid var(--accent-teal); background: var(--bg-main);
}
.foto-lapiz {
  position: absolute; right: -2px; bottom: -2px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-teal); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; border: 3px solid #fff; box-shadow: var(--shadow-sm);
}
.foto-marco:hover .foto-lapiz { background: var(--teal-hover); }

.foto-soltar .avatar-xl { border-style: dashed; border-color: var(--warning); }
.foto-cambiada .avatar-xl { border-color: var(--warning); }

.foto-acciones {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px;
}
#foto-info { max-width: 220px; margin: 8px auto 0; }

/* La cabecera del perfil pasa a tres zonas */
.perfil-cabecera { align-items: flex-start; }

/* ---------- Guardadas ---------- */
.guardar-btn.active { color: var(--accent-teal); font-weight: 700; }
a.stat-card { text-decoration: none; display: block; transition: border-color .18s, transform .18s; }
a.stat-card:hover { border-color: var(--accent-teal); transform: translateY(-2px); }

@media (max-width: 860px) {
  .foto-caja { width: 100%; }
  .foto-marco .avatar-xl { width: 96px; height: 96px; }
  .foto-acciones .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   v4.6 - EFECTOS DE MOVIMIENTO
   Todo lo de aquí abajo se apaga solo si el sistema pide menos movimiento
   (ver el bloque prefers-reduced-motion al final del archivo).
   ========================================================================== */

/* Emojis que salen volando de un botón. Van sobre el body, fuera de todo,
   con pointer-events a none para no tapar nada de lo que hay debajo. */
.chispa {
  position: fixed;
  z-index: 9000;
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
  transform: translate(-50%, -50%);
}
.chispa-vuelo { font-size: 26px; filter: drop-shadow(0 3px 6px rgba(11,30,45,.28)); }

/* --- Me gusta --- */
@keyframes late {
  0%   { transform: scale(1); }
  22%  { transform: scale(1.32) rotate(-6deg); }
  42%  { transform: scale(.92) rotate(3deg); }
  62%  { transform: scale(1.16) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}
.late { animation: late .62s cubic-bezier(.25,.9,.3,1.2); }

@keyframes numero-sube {
  0%   { transform: translateY(0);    opacity: 1; }
  40%  { transform: translateY(-11px); opacity: 0; }
  60%  { transform: translateY(9px);  opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
.numero-sube { display: inline-block; animation: numero-sube .45s ease; }

@keyframes encoge {
  0%   { transform: scale(1); }
  45%  { transform: scale(.84); }
  100% { transform: scale(1); }
}
.encoge { animation: encoge .3s ease; }

/* Onda que sale del botón al activarlo: se ve incluso de reojo. */
.like-btn, .guardar-btn { position: relative; overflow: visible; }
.like-btn.late::after,
.guardar-btn.marca-entra::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: onda .6s ease-out forwards;
}
.like-btn.late::after       { box-shadow: 0 0 0 0 rgba(231,76,60,.55); }
.guardar-btn.marca-entra::after { box-shadow: 0 0 0 0 rgba(0,168,150,.55); }

@keyframes onda {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: .55; }
  100% { box-shadow: 0 0 0 46px currentColor; opacity: 0; }
}

/* --- Guardar en favoritos --- */
@keyframes marca-entra {
  0%   { transform: scale(1) rotate(0); }
  25%  { transform: scale(1.35) rotate(-12deg); }
  55%  { transform: scale(.94) rotate(8deg); }
  80%  { transform: scale(1.12) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}
.marca-entra { animation: marca-entra .68s cubic-bezier(.25,.9,.3,1.25); }

/* El sitio al que vuela el marcador acusa el golpe */
@keyframes destino-recibe {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.25); background-color: var(--teal-light); }
  100% { transform: scale(1); }
}
.destino-recibe { animation: destino-recibe .5s ease; }

/* --- Crear publicación --- */
.create-post { transition: box-shadow .25s, transform .25s, border-color .25s; }
.create-post.escribiendo {
  box-shadow: 0 0 0 3px rgba(0,168,150,.18), var(--shadow-md);
  transform: translateY(-2px);
}

/* Barra que recorre la caja mientras se envía: se ve que está trabajando. */
.create-post.publicando { position: relative; overflow: hidden; pointer-events: none; }
.create-post.publicando::after {
  content: '';
  position: absolute; left: 0; top: 0; height: 4px; width: 40%;
  background: linear-gradient(90deg, transparent, var(--accent-teal), transparent);
  animation: barrido .9s linear infinite;
}
@keyframes barrido {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
.create-post.publicando textarea { opacity: .55; }

/* La publicación recién creada entra deslizándose y se queda resaltada. */
@keyframes entra-post {
  0%   { opacity: 0; transform: translateY(-26px) scale(.97); }
  60%  { opacity: 1; transform: translateY(4px)  scale(1.005); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes destello {
  0%, 100% { box-shadow: var(--shadow-sm); }
  30%      { box-shadow: 0 0 0 3px rgba(0,168,150,.45), var(--shadow-md); }
}
.post-nueva {
  animation: entra-post .55s cubic-bezier(.2,.8,.3,1), destello 1.6s ease 2;
  border-left: 4px solid var(--accent-teal);
}

/* ==========================================================================
   v4.6 - FICHA DE USUARIO (ventana al pulsar una foto de perfil)
   ========================================================================== */
.avatar-pulsable { cursor: pointer; transition: transform .18s, box-shadow .18s; }
.avatar-pulsable:hover,
.avatar-pulsable:focus-visible {
  transform: scale(1.09);
  box-shadow: 0 0 0 3px var(--accent-teal);
  outline: none;
}

/* OJO: display:flex de una hoja de autor gana al display:none que el
   navegador aplica a [hidden], así que hay que repetirlo a mano. Sin esta
   línea el fondo invisible se queda encima de toda la página y no se puede
   pulsar nada. */
.ficha-fondo[hidden] { display: none !important; }

.ficha-fondo {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(11,30,45,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  opacity: 0;
  transition: opacity .18s ease;
}
@supports (backdrop-filter: blur(3px)) {
  .ficha-fondo { backdrop-filter: blur(3px); }
}
.ficha-fondo.abierta { opacity: 1; }

.ficha {
  position: relative;
  background: var(--card-white);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(11,30,45,.35);
  width: 100%; max-width: 460px;
  max-height: 88vh; overflow-y: auto;
  padding: 26px 24px 22px;
  transform: translateY(16px) scale(.96);
  transition: transform .22s cubic-bezier(.2,.9,.3,1.1);
}
.ficha-fondo.abierta .ficha { transform: translateY(0) scale(1); }

.ficha-cerrar {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  border: none; background: var(--bg-main); color: var(--text-muted);
  font-size: 16px; cursor: pointer; line-height: 1;
}
.ficha-cerrar:hover { background: var(--danger); color: #fff; }

.ficha-cargando { padding: 40px 10px; text-align: center; color: var(--text-muted); }

.ficha-cabecera { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.ficha-cabecera .avatar-xl { width: 76px; height: 76px; flex: none; }
.ficha-cabecera h3 { font-size: 19px; color: var(--primary-navy); line-height: 1.3; }
.ficha-cabecera p { font-size: 13px; margin-top: 2px; }
.ficha-bloqueada { color: var(--danger); font-weight: 600; font-size: 13px; }

.ficha-bio {
  background: var(--bg-main); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 14px; margin-bottom: 14px;
  white-space: pre-wrap; word-break: break-word;
}

.ficha-datos { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.ficha-fila {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 2px; border-bottom: 1px solid var(--border-color);
  font-size: 14px;
}
.ficha-fila:last-child { border-bottom: none; }
.ficha-fila span { color: var(--text-muted); flex: none; }
.ficha-fila b, .ficha-fila a { text-align: right; word-break: break-word; }
.ficha-fila a { color: var(--accent-teal); }

.ficha-stats { display: flex; gap: 10px; margin-bottom: 14px; }
.ficha-stats div {
  flex: 1; background: var(--bg-main); border-radius: var(--radius-sm);
  padding: 10px 6px; text-align: center; min-width: 0;
}
.ficha-stats b { display: block; font-size: 20px; color: var(--primary-navy); }
.ficha-stats span { font-size: 11px; color: var(--text-muted); }

/* ==========================================================================
   v4.6 - LISTA DE PUBLICACIONES GUARDADAS (en el perfil)
   ========================================================================== */
.guardadas-lista { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }

.guardada {
  display: flex; gap: 14px; align-items: stretch;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: 12px; background: var(--card-white);
  transition: border-color .18s, transform .18s, opacity .3s;
}
.guardada:hover { border-color: var(--accent-teal); transform: translateX(3px); }
.guardada-fuera { opacity: 0; transform: translateX(40px) scale(.95); }

.guardada-miniatura {
  flex: none; width: 82px; height: 82px; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--bg-main);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; text-decoration: none;
}
.guardada-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.guardada-sin-foto { color: var(--text-muted); }

.guardada-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.guardada-autor { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.guardada-autor .avatar-sm { width: 24px; height: 24px; }
.guardada-texto {
  color: var(--text-dark); text-decoration: none; font-size: 14px; line-height: 1.45;
  word-break: break-word;
}
.guardada-texto:hover { color: var(--accent-teal); }
.guardada-pie {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-muted); margin-top: auto;
}
.guardada-pie .btn { margin-left: auto; }

/* ==========================================================================
   v4.6 - NORMAS DE USO
   ========================================================================== */
.texto-normas { line-height: 1.75; }
.texto-normas h3 {
  color: var(--primary-navy); font-size: 18px;
  margin: 26px 0 10px; padding-bottom: 8px;
  border-bottom: 2px solid var(--teal-light);
}
.texto-normas h3:first-child { margin-top: 0; }
.texto-normas h4 { color: var(--primary-navy); font-size: 15px; margin: 18px 0 8px; }
.texto-normas p  { margin-bottom: 12px; }
.texto-normas ul { margin: 0 0 14px 20px; }
.texto-normas li { margin-bottom: 7px; }
.texto-normas code {
  background: var(--bg-main); padding: 2px 6px; border-radius: 4px;
  font-family: Consolas, Menlo, monospace; font-size: 13px;
}

/* ==========================================================================
   v4.6 - MÓVIL SIN ZOOM
   Si no se puede ampliar, el texto y los campos tienen que ser legibles
   de entrada. 16 px es además el mínimo con el que iOS no hace zoom solo
   al poner el cursor en un campo.
   ========================================================================== */
@media (max-width: 860px) {
  input, select, textarea, .input-xs, .input-linea { font-size: 16px !important; }
  body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  .ficha { max-width: 100%; padding: 22px 16px 18px; }
  .ficha-cabecera .avatar-xl { width: 64px; height: 64px; }
  .ficha-stats { flex-wrap: wrap; }
  .guardada { flex-direction: column; }
  .guardada-miniatura { width: 100%; height: 130px; }
  .guardada-pie .btn { margin-left: 0; }

  /* Los cuatro botones de cada publicación no caben en una fila de 390 px y
     partían las palabras por la mitad («Comen tar»). Se reparten en dos filas
     y cada uno se queda entero. */
  .post-footer { flex-wrap: wrap; gap: 4px; }
  .post-footer .action-btn {
    white-space: nowrap;
    flex: 1 1 auto;
    justify-content: center;
    padding-left: 8px; padding-right: 8px;
    font-size: 13px;
  }
}

/* Quien pide menos movimiento en su sistema no ve ninguna de las animaciones,
   pero sigue viendo todos los cambios de estado (colores, textos, iconos). */
@media (prefers-reduced-motion: reduce) {
  .late, .encoge, .numero-sube, .marca-entra, .destino-recibe,
  .post-nueva, .create-post.publicando::after, .chispa {
    animation: none !important;
    transition: none !important;
  }
  .ficha, .ficha-fondo { transition: none !important; }
}

/* ==========================================================================
   v4.6 - PANEL: HISTORIAL REMOTO POR PERSONA
   ========================================================================== */
.historial-caja {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 18px;
  align-items: start;
}
.historial-caja > * { min-width: 0; }

.historial-personas { max-height: 78vh; overflow-y: auto; }
.persona-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text-dark);
  border-left: 3px solid transparent;
  transition: background .16s, border-color .16s;
}
.persona-item:hover  { background: var(--bg-main); }
.persona-item.activa { background: var(--teal-light); border-left-color: var(--accent-teal); }
.persona-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.persona-datos b    { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona-datos span { font-size: 12px; }

.sesion-hist-cab {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid var(--border-color); margin-bottom: 10px;
}

.chat-historial {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-main); border-radius: var(--radius-sm);
  padding: 12px; margin-top: 10px; max-height: 340px; overflow-y: auto;
}
.chat-linea {
  background: var(--card-white); border-radius: 10px; padding: 8px 12px;
  max-width: 85%; font-size: 14px; box-shadow: var(--shadow-sm);
}
.chat-linea p { word-break: break-word; }
.chat-cliente { align-self: flex-start; border-left: 3px solid var(--accent-teal); }
.chat-tecnico { align-self: flex-end;   border-left: 3px solid var(--primary-navy); }
.chat-quien { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.chat-hora  { display: block; font-size: 11px; color: var(--text-muted); text-align: right; }

/* ==========================================================================
   v4.6 - PANEL: DIAGNÓSTICO DE SEGURIDAD
   ========================================================================== */
.nota-seguridad {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  margin-top: 16px; padding: 18px;
  background: var(--bg-main); border-radius: var(--radius-md);
  border-left: 5px solid var(--nota-color, var(--accent-teal));
}
.nota-numero { font-size: 46px; font-weight: 800; color: var(--nota-color, var(--accent-teal)); line-height: 1; }
.nota-numero span { font-size: 17px; font-weight: 600; color: var(--text-muted); }
.nota-barra {
  width: min(340px, 60vw); height: 9px; border-radius: 5px;
  background: var(--border-color); overflow: hidden; margin-top: 8px;
}
.nota-barra span { display: block; height: 100%; border-radius: 5px; transition: width .6s ease; }

.check-seguridad {
  border-left: 4px solid var(--border-color);
  background: var(--bg-main);
  border-radius: var(--radius-sm);
  padding: 12px 14px; margin-top: 10px;
}
.check-seguridad p { font-size: 14px; margin-top: 4px; }
.check-cab { display: flex; align-items: center; gap: 9px; }
.check-cab b { color: var(--primary-navy); }
.check-icono { font-size: 16px; }
.check-ok    { border-left-color: var(--success); }
.check-aviso { border-left-color: var(--warning); }
.check-fallo { border-left-color: var(--danger); background: #FDF2F1; }
.check-info  { border-left-color: var(--text-muted); }
.check-solucion {
  background: var(--card-white); border-radius: 6px;
  padding: 9px 11px; margin-top: 8px; font-size: 13.5px;
}

/* ==========================================================================
   v4.6 - PANEL: ACTUALIZACIONES Y CORREO
   ========================================================================== */
.lista-archivos {
  list-style: none; margin: 8px 0 0; padding: 10px 12px;
  background: var(--bg-main); border-radius: var(--radius-sm);
  max-height: 260px; overflow-y: auto;
}
.lista-archivos li { padding: 3px 0; font-size: 13px; }
.lista-archivos code { font-family: Consolas, Menlo, monospace; word-break: break-all; }

.traza-smtp {
  background: var(--primary-navy); color: #CFE8E4;
  padding: 14px; border-radius: var(--radius-sm);
  font-family: Consolas, Menlo, monospace; font-size: 12.5px;
  line-height: 1.6; overflow-x: auto; white-space: pre-wrap;
  word-break: break-word; margin-top: 10px; max-height: 320px; overflow-y: auto;
}

.form-contacto { display: flex; flex-direction: column; gap: 4px; }
.form-contacto .input-xs { min-width: 120px; }

.form-inline-ancho { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.form-inline-ancho input { flex: 1 1 180px; }

.editor-normas {
  font-family: Consolas, Menlo, monospace;
  font-size: 13.5px; line-height: 1.65; min-height: 380px;
}

.ayuda-plegable { margin-top: 16px; border-top: 1px solid var(--border-color); padding-top: 12px; }
.ayuda-plegable summary {
  cursor: pointer; font-weight: 600; color: var(--accent-teal); font-size: 14px;
}
.ayuda-plegable > div { margin-top: 10px; font-size: 14px; }
.ayuda-plegable p { margin-bottom: 8px; }

@media (max-width: 992px) {
  .historial-caja { grid-template-columns: 1fr; }
  .historial-personas { max-height: 320px; }
  .chat-linea { max-width: 100%; }
  .nota-numero { font-size: 38px; }
}


/* ==========================================================================
   v4.6.1 - CUENTAS COMO FICHAS
   Nueve columnas no caben en el ancho del panel: el nombre se partía letra a
   letra y «Activo» se leía en vertical. Cada cuenta pasa a ser una ficha.
   ========================================================================== */
.cuentas-lista { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }

.cuenta {
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent-teal);
  border-radius: var(--radius-md);
  padding: 16px;
  background: var(--card-white);
  transition: border-color .18s, box-shadow .18s;
}
.cuenta:hover { box-shadow: var(--shadow-sm); }
.cuenta-bloqueada { border-left-color: var(--danger); background: #FCF7F7; }

.cuenta-cab {
  display: flex; gap: 14px; align-items: flex-start;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}
.cuenta-cab .avatar { width: 52px; height: 52px; flex: none; }
.cuenta-quien { flex: 1; min-width: 0; }
.cuenta-quien h4 {
  font-size: 17px; color: var(--primary-navy); line-height: 1.35;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cuenta-quien p { font-size: 13px; line-height: 1.5; word-break: break-word; }

.cuenta-rol { flex: none; display: flex; flex-direction: column; gap: 4px; }
.cuenta-rol label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.cuenta-rol select {
  padding: 8px 10px; border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); font-size: 14px; background: #fff; min-width: 150px;
}

.cuenta-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cuenta-form { min-width: 0; }
.cuenta-form-ancha { grid-column: 1 / -1; }
.cuenta-form label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-muted); margin-bottom: 5px;
}

.campo-con-boton { display: flex; gap: 8px; align-items: stretch; }
.campo-con-boton input { flex: 1 1 auto; }
.campo-con-boton .btn { flex: none; white-space: nowrap; }
.campo-con-boton .campo-telefono { flex: 0 1 190px; }

.cuenta-acciones {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

@media (max-width: 860px) {
  .cuenta-cab { flex-wrap: wrap; }
  .cuenta-rol { width: 100%; }
  .cuenta-rol select { width: 100%; }
  .cuenta-campos { grid-template-columns: 1fr; }
  .campo-con-boton { flex-wrap: wrap; }
  .campo-con-boton input { flex: 1 1 100%; }
  .campo-con-boton .campo-telefono { flex: 1 1 100%; }
  .campo-con-boton .btn { flex: 1 1 auto; }
  .cuenta-acciones .btn { flex: 1 1 auto; }
  .form-inline-ancho input { flex: 1 1 100%; }
}

/* ==========================================================================
   v4.6.1 - EFECTO AL COMENTAR
   ========================================================================== */
.chispa-avion { font-size: 30px; filter: drop-shadow(0 4px 8px rgba(11,30,45,.3)); }

/* La caja de escribir se ilumina mientras se teclea */
.form-comentario, .form-comentario-rapido { transition: box-shadow .22s, transform .22s; }
.form-comentario.escribiendo,
.form-comentario-rapido.escribiendo {
  box-shadow: 0 0 0 3px rgba(0,168,150,.16);
  border-radius: var(--radius-sm);
}

/* Mientras se envía, el texto se apaga y el campo se encoge un pelín:
   se ve que el mensaje «se ha ido». */
.form-comentario.enviando,
.form-comentario-rapido.enviando { pointer-events: none; }
.form-comentario.enviando textarea,
.form-comentario.enviando input,
.form-comentario-rapido.enviando input {
  opacity: .45;
  transform: scale(.98);
  transition: opacity .3s, transform .3s;
}

/* El comentario recién escrito entra dando un saltito y se queda resaltado */
@keyframes entra-comentario {
  0%   { opacity: 0; transform: translateX(-24px) scale(.94); }
  55%  { opacity: 1; transform: translateX(6px)  scale(1.02); }
  75%  { transform: translateX(-2px) scale(1); }
  100% { opacity: 1; transform: translateX(0)   scale(1); }
}
@keyframes resalta-comentario {
  0%, 100% { background: transparent; }
  25%      { background: var(--teal-light); }
}
.comentario-nuevo {
  animation: entra-comentario .55s cubic-bezier(.2,.8,.3,1.1),
             resalta-comentario 1.8s ease 2;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent-teal);
  padding-left: 9px;
}

@media (prefers-reduced-motion: reduce) {
  .comentario-nuevo, .chispa-avion,
  .form-comentario.enviando textarea,
  .form-comentario.enviando input,
  .form-comentario-rapido.enviando input {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   v4.7 - FORMATO DE LAS PUBLICACIONES
   ========================================================================== */
.barra-formato {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 8px; margin-bottom: 10px;
  background: var(--bg-main); border-radius: var(--radius-sm);
}
.barra-formato button {
  min-width: 34px; height: 34px; padding: 0 9px;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; cursor: pointer;
  font-size: 14px; color: var(--text-dark); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, transform .12s;
}
.barra-formato button:hover  { background: #fff; border-color: var(--border-color); }
.barra-formato button:active { transform: scale(.92); }
.barra-formato button.activo { background: var(--primary-navy); color: #fff; }
.barra-sep { width: 1px; height: 22px; background: var(--border-color); margin: 0 4px; }

.boton-color span {
  display: block; width: 17px; height: 17px; border-radius: 50%;
  background: var(--c); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border-color);
}
.boton-color:hover span { transform: scale(1.15); }
.boton-marca { background: #FFF7C2 !important; }

.vista-previa {
  margin: 10px 0; padding: 14px;
  border: 1px dashed var(--accent-teal); border-radius: var(--radius-sm);
  background: #fff; position: relative;
}
.vista-previa-etiqueta {
  position: absolute; top: -9px; left: 12px;
  background: var(--accent-teal); color: #fff;
  font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 4px;
}
.vista-previa-cuerpo { margin-top: 4px; }

/* Cómo se ve el texto formateado, tanto en la previa como en el feed */
.post-texto .post-titulo {
  color: var(--primary-navy); line-height: 1.3;
  margin: 14px 0 8px; font-weight: 700;
}
.post-texto .post-titulo:first-child { margin-top: 0; }
.post-texto h3.post-titulo { font-size: 20px; }
.post-texto h4.post-titulo { font-size: 17px; }
.post-texto h5.post-titulo { font-size: 15px; }
.post-texto p  { margin-bottom: 10px; }
.post-texto p:last-child { margin-bottom: 0; }
.post-texto .post-lista { margin: 0 0 10px 20px; }
.post-texto .post-lista li { margin-bottom: 5px; }
.post-texto .post-cita {
  margin: 0 0 10px; padding: 8px 14px;
  border-left: 3px solid var(--accent-teal);
  background: var(--bg-main); border-radius: 0 6px 6px 0;
  color: var(--text-dark); font-style: italic;
}
.post-texto mark { background: #FFF17A; padding: 1px 3px; border-radius: 3px; }
.post-texto code {
  background: var(--bg-main); padding: 2px 6px; border-radius: 4px;
  font-family: Consolas, Menlo, monospace; font-size: 13px;
}
.post-texto a { color: var(--accent-teal); word-break: break-word; }
.post-texto u { text-decoration-color: var(--accent-teal); text-underline-offset: 3px; }

/* ==========================================================================
   v4.7 - COMPARTIR
   ========================================================================== */
.compartir-caja { position: relative; display: inline-flex; }

/* Va en position:fixed a propósito: la tarjeta de la publicación tiene
   overflow:hidden (para redondear la imagen) y un menú absoluto se recortaba
   contra su borde. En fijo se escapa de cualquier recorte; JS lo coloca. */
.compartir-menu {
  position: fixed; top: 0; left: 0; z-index: 9400;
  min-width: 210px; padding: 6px;
  background: var(--card-white); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(11,30,45,.18);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.compartir-menu.abierto { opacity: 1; visibility: visible; transform: translateY(0); }

.compartir-menu a,
.compartir-menu button {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border: none; background: none; cursor: pointer;
  font-size: 14px; color: var(--text-dark); text-decoration: none;
  border-radius: var(--radius-sm); font-family: inherit;
}
.compartir-menu a:hover,
.compartir-menu button:hover { background: var(--teal-light); color: var(--primary-navy); }

/* ==========================================================================
   v4.7 - BOTÓN DE CERRAR SESIÓN (la X)
   ========================================================================== */
.btn-salir {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border-radius: 50%; background: var(--bg-main); color: var(--text-muted);
  text-decoration: none;
  transition: background .18s, color .18s, transform .18s, box-shadow .18s;
}
.btn-salir svg { width: 17px; height: 17px; }
.btn-salir svg path {
  stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; fill: none;
}
.btn-salir:hover, .btn-salir:focus-visible {
  background: var(--danger); color: #fff;
  transform: rotate(90deg) scale(1.08);
  box-shadow: 0 3px 10px rgba(231,76,60,.4);
  outline: none;
}

/* La misma X en el menú lateral del panel */
.nav-salir { display: flex !important; align-items: center; gap: 9px; color: var(--danger) !important; }
.nav-salir svg { width: 15px; height: 15px; flex: none; transition: transform .18s; }
.nav-salir svg path { stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; fill: none; }
.nav-item:hover .nav-salir svg { transform: rotate(90deg); }

/* ==========================================================================
   v4.7 - CATEGORÍAS DE CORREO
   ========================================================================== */
.rejilla-categorias {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px; margin: 14px 0 4px;
}
.categoria-correo {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; cursor: pointer;
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  background: var(--card-white);
  transition: border-color .16s, background .16s;
}
.categoria-correo:hover { border-color: var(--accent-teal); }
.categoria-correo.activa { border-color: var(--accent-teal); background: var(--teal-light); }
.categoria-correo input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--accent-teal); }
.categoria-icono { font-size: 17px; line-height: 1.3; flex: none; }
.categoria-texto { display: flex; flex-direction: column; min-width: 0; }
.categoria-texto b     { font-size: 14px; color: var(--primary-navy); }
.categoria-texto small { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

/* El botón de vista previa se va al final de la barra: separa lo que da
   formato de lo que solo enseña el resultado. */
.barra-formato [data-vista-previa] {
  margin-left: auto; padding: 0 12px; white-space: nowrap;
  border-color: var(--border-color); background: #fff;
}

@media (max-width: 860px) {
  .barra-formato { gap: 3px; padding: 6px; }
  .barra-formato button { min-width: 38px; height: 38px; }
  .barra-formato [data-vista-previa] { margin-left: 0; flex: 1 1 100%; }
  .barra-sep { display: none; }
  .compartir-menu { min-width: 190px; }
  .rejilla-categorias { grid-template-columns: 1fr; }
  /* La fila de abajo del editor: adjuntar, visibilidad y publicar. Con
     nowrap en la etiqueta, «Publicar» se salía; así cada cosa cabe entera
     y la fila pasa a dos líneas si hace falta. */
  .create-post-actions { flex-wrap: wrap; gap: 10px; }
  .post-tools { flex: 1 1 100%; }
  .file-label { white-space: nowrap; }
  .create-post-actions > .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   v4.8 - AVISOS DE LA PANTALLA COMPARTIDA
   Los mensajes son instrucciones paso a paso, así que se respetan los saltos
   de línea en vez de dejar que el navegador lo junte todo en un párrafo.
   ========================================================================== */
.sala-aviso {
  margin: 12px 0 0; padding: 14px 16px;
  border-radius: var(--radius-sm); border-left: 4px solid var(--accent-teal);
  background: var(--bg-main); font-size: 14px; line-height: 1.6;
}
.sala-aviso b { display: block; margin-bottom: 6px; color: var(--primary-navy); font-size: 15px; }
.sala-aviso p { white-space: pre-line; margin: 0; }
.sala-aviso-error { border-left-color: var(--danger); background: #FDF2F1; }
.sala-aviso-info  { border-left-color: var(--warning); background: #FFF9EC; }


/* El selector de archivo salía con el botón gris del navegador y desentonaba
   con todo lo demás. Se le da el aspecto de la casa. */
.campo input[type=file] { padding: 8px 10px; cursor: pointer; }
.campo input[type=file]::file-selector-button {
  margin-right: 12px; padding: 7px 14px; cursor: pointer;
  border: none; border-radius: 6px;
  background: var(--primary-navy); color: #fff;
  font-family: inherit; font-size: 13px; font-weight: 600;
}
.campo input[type=file]::file-selector-button:hover { background: var(--navy-light); }

/* ==========================================================================
   v4.9.1 · DIAGNÓSTICO DE LA SALA
   Un registro legible dentro de la propia página. La consola del navegador
   no vale: el cliente no sabe abrirla y el técnico necesita poder copiar
   esto y pegarlo en un correo.
   ========================================================================== */
.sala-diag {
    margin-top: 12px;
    border: 1px solid var(--borde, #d8dee6);
    border-radius: 10px;
    background: #0f172a;
    color: #cbd5e1;
    overflow: hidden;
}
.sala-diag[hidden] { display: none !important; }

.sala-diag-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: #1e293b;
    color: #e2e8f0;
    font-size: 13px;
}

.sala-diag-lineas {
    max-height: 190px;
    overflow-y: auto;
    padding: 8px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    line-height: 1.65;
}
.sala-diag-lineas .diag-linea {
    white-space: pre-wrap;
    word-break: break-word;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    padding: 1px 0;
}
.sala-diag-lineas .diag-linea:last-child { border-bottom: 0; }

.sala-diag .nota-pequena {
    margin: 0;
    padding: 6px 12px 10px;
    color: #94a3b8;
    font-size: 11px;
}

@media (max-width: 520px) {
    .sala-diag-lineas { max-height: 140px; font-size: 10.5px; }
}

/* ==========================================================================
   v4.9.2 · PRUEBA DEL SERVIDOR DE PASO (TURN)
   ========================================================================== */
.turn-prueba {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 4px 0 18px;
}

.turn-resultado {
    flex: 1 1 100%;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.6;
    border: 1px solid transparent;
}
.turn-resultado[hidden] { display: none !important; }
.turn-resultado p { margin: 0; white-space: pre-wrap; }
.turn-resultado p:empty { height: 8px; }

.turn-ok     { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.turn-aviso  { background: #fffbeb; border-color: #fde68a; color: #78350f; }
.turn-mal    { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.turn-neutro { background: #f1f5f9; border-color: #e2e8f0; color: #334155; }

@media (prefers-color-scheme: dark) {
    .turn-ok     { background: #052e22; border-color: #065f46; color: #a7f3d0; }
    .turn-aviso  { background: #2e2005; border-color: #78350f; color: #fde68a; }
    .turn-mal    { background: #2e0808; border-color: #7f1d1d; color: #fecaca; }
    .turn-neutro { background: #1e293b; border-color: #334155; color: #cbd5e1; }
}

/* ==========================================================================
   v4.10 · EDITOR PLEGABLE

   El editor vive en el HTML siempre; lo que lo esconde es [data-plegado].
   Se oculta con display:none y no con altura 0, para que lo que hay dentro
   no sea alcanzable con el tabulador mientras está cerrado.
   ========================================================================== */
.create-post-plegable { padding: 0; overflow: visible; }

.create-post-plegable[data-plegado] .crear-cuerpo { display: none; }
.create-post-plegable:not([data-plegado]) .crear-cebo { display: none; }

/* --- La línea que invita a escribir --- */
.crear-cebo {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    background: transparent;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: background .15s ease;
}
.crear-cebo:hover  { background: rgba(0, 168, 150, .07); }
.crear-cebo:active { background: rgba(0, 168, 150, .12); }
.crear-cebo:focus-visible { outline: 2px solid var(--teal, #00A896); outline-offset: -2px; }

.crear-cebo-avatar {
    flex: 0 0 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00A896, #0B1E2D);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 17px;
}

.crear-cebo-texto {
    flex: 1 1 auto;
    color: var(--texto-mudo, #64748b);
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crear-cebo-iconos {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    font-size: 17px;
    opacity: .75;
}

/* --- La cabecera del editor abierto --- */
.crear-cuerpo { padding: 14px 16px 16px; }

.crear-cuerpo-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -2px 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--borde, #e2e8f0);
    font-size: 15px;
}

.crear-cerrar {
    border: 0;
    background: transparent;
    font-size: 17px;
    line-height: 1;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--texto-mudo, #64748b);
}
.crear-cerrar:hover { background: rgba(0, 0, 0, .07); color: #b91c1c; }

.nota-video { font-size: 12px; align-self: center; }
.file-label-video { white-space: nowrap; }

@media (max-width: 520px) {
    .crear-cebo { padding: 12px; gap: 10px; }
    .crear-cebo-texto { font-size: 14px; }
    .crear-cebo-avatar { flex-basis: 34px; height: 34px; font-size: 15px; }
    .crear-cebo-iconos { font-size: 15px; gap: 6px; }
}

/* ==========================================================================
   v4.10 · VÍDEO EN LAS PUBLICACIONES
   ========================================================================== */
.post-video {
    position: relative;
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    line-height: 0;
}

.post-video-el {
    display: block;
    width: 100%;
    max-height: 70vh;
    background: #000;
    cursor: pointer;
}

/* Botón grande de play, centrado. Desaparece mientras se reproduce. */
.video-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 62px;
    height: 62px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 24px;
    padding-left: 4px;          /* el triángulo ▶ no está centrado del todo */
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: opacity .2s ease, transform .2s ease;
    backdrop-filter: blur(2px);
}
.post-video.reproduciendo .video-play { opacity: 0; pointer-events: none; transform: scale(.85); }
.video-play:hover { background: rgba(0, 0, 0, .75); }

/* Barra de abajo: sonido, duración, pantalla completa. */
.video-barra {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
    pointer-events: none;       /* el hueco no roba los clics al vídeo */
}
.video-barra > * { pointer-events: auto; }

.video-boton {
    border: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.video-boton:hover { background: rgba(0, 0, 0, .8); }
.video-boton:last-child { margin-left: auto; }

.video-duracion {
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 20px;
    font-variant-numeric: tabular-nums;
}

.video-error {
    margin: 0;
    padding: 12px 14px;
    background: #fef2f2;
    color: #7f1d1d;
    font-size: 13px;
    line-height: 1.5;
}
.post-video.video-roto .post-video-el,
.post-video.video-roto .video-play,
.post-video.video-roto .video-barra { display: none; }

@media (max-width: 520px) {
    .post-video-el { max-height: 62vh; }
    .video-play { width: 52px; height: 52px; font-size: 20px; }
}

/* ==========================================================================
   v4.10.1 · APARIENCIA (logo, título de pestaña y pantalla de carga)
   ========================================================================== */
.panel-bloque {
    border: 1px solid var(--borde, #e2e8f0);
    border-radius: 14px;
    padding: 18px 20px 20px;
    margin: 18px 0;
    background: var(--tarjeta, #fff);
}
.panel-bloque > h3 { margin: 0 0 6px; font-size: 16px; }
.panel-bloque .botonera { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* --- Cómo queda el logo sobre los dos fondos --- */
.logo-actual { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 18px; }

.logo-muestra {
    flex: 1 1 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 14px 12px;
    border-radius: 12px;
    font-size: 12px;
}
.logo-muestra-clara  { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.logo-muestra-oscura { background: #0B1E2D; color: #94a3b8; border: 1px solid #1e293b; }
.logo-vista { width: 54px; height: 54px; object-fit: contain; }

/* --- La pestaña de navegador de mentira --- */
.titulo-previa { margin: 16px 0 18px; }
.titulo-previa-etiqueta {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--texto-mudo, #64748b);
    margin-bottom: 8px;
}
.pestana-falsa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 280px;
    padding: 8px 14px 8px 10px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    font-size: 13px;
    color: #334155;
}
.pestana-falsa span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pestana-falsa img { flex: 0 0 16px; border-radius: 3px; }

/* --- La vista previa de la pantalla de carga --- */
.carga-previa {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    margin: 12px 0 18px;
}
.carga-previa-marco {
    flex: 1 1 320px;
    min-height: 240px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--borde, #e2e8f0);
    /* Un texto de fondo para que se vea el efecto del desenfoque encima */
    background:
        repeating-linear-gradient(0deg, #f8fafc 0 14px, #eef2f7 14px 16px),
        #f8fafc;
    position: relative;
}
.carga-previa-lado { flex: 0 1 190px; }
.carga-previa-lado .btn { margin-top: 8px; }

/* La capa de la previa usa las clases de la pantalla real, pero no puede ser
   fixed: tiene que quedarse dentro de su marco. */
.gc-previa-capa {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s ease;
    --gc-acento: #00A896;
}
.gc-previa-capa .gc-pre-caja { transform: scale(.92); }

@media (max-width: 620px) {
    .carga-previa-lado { flex-basis: 100%; }
    .panel-bloque { padding: 14px 14px 16px; }
}