/*
 * Lo que el CRM necesita y las maquetas no tenían. La base es diseno/estilo.css,
 * que se sirve tal cual: aquí solo se agrega, no se redefine el sistema.
 * Sin estilos en línea en el HTML (la CSP no los deja pasar): por eso existen
 * clases como .separada que en la maqueta eran style="margin-bottom:16px".
 */
body.sin-nav { padding-bottom: 0; }
.separada { margin-bottom: var(--e4); }
.separada-chica { margin-bottom: var(--e3); }
.arriba { margin-top: var(--e4); }
.arriba-chico { margin-top: var(--e2); }
.sin-subrayado { text-decoration: none; color: inherit; }
.sub-p { font-size: 14px; color: var(--tinta-2); }
.nota-pie { font-size: 13px; }
.ancho-completo { flex-basis: 100%; }
.lista-limpia { list-style: none; margin: 0; padding: 0; }
.persona-paises { padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linea); }
.persona-paises:last-child { border-bottom: 0; }
.persona-paises p { margin: var(--e1) 0 0; font-size: 14px; }

/* Quién está dentro y el botón de salir, en la barra. En el teléfono el nombre
 * no cabe junto al selector de idioma: se queda solo el botón. */
.quien { display: none; font-size: 13px; font-weight: 600; color: var(--tinta-2); white-space: nowrap; }
.salir { margin: 0; flex-shrink: 0; }
@media (min-width: 768px) { .quien { display: inline; } }

/* Avisos de una acción (guardado, error). El color nunca va solo: es una frase. */
.aviso-crm {
  margin: 0 0 var(--e4); padding: var(--e3) var(--e4);
  border-radius: var(--radio); font-size: 14px; border: 1px solid var(--linea);
}
.aviso-crm.ok { background: var(--bien-tenue); color: var(--bien); border-color: #cfe3db; }
.aviso-crm.error { background: var(--rojo-tenue); color: var(--rojo); border-color: #f0cdca; }
.error-campo {
  margin: 0 0 var(--e3); padding: var(--e2) var(--e3); border-radius: var(--radio);
  background: var(--rojo-tenue); color: var(--rojo); font-size: 14px;
}

/* Formularios en línea dentro de una celda o una fila de botones. */
form.en-linea { display: inline; margin: 0; }
.correo { display: block; font-weight: 400; font-size: 12.5px; }
.tabla td.acciones-celda .acciones { gap: var(--e2); }

/* Países: el formulario de cada fila. Con JavaScript se guarda al cambiar y el
 * botón sobra; sin JavaScript el botón es la forma de guardar. */
.asignar { display: flex; gap: var(--e2); align-items: center; margin: 0; }
.js .sin-js { display: none; }
/* La tabla de la maqueta fija `display` en cada fila (grid en el teléfono,
 * table-row en escritorio) y eso le gana al atributo `hidden`. */
.tabla tbody tr[hidden] { display: none; }
.tabla-paises tr.guardando { opacity: .6; }
.tabla-paises tr.guardado td.area-pais { color: var(--bien); font-weight: 600; }
.buscar-pais { display: flex; gap: var(--e2); align-items: center; margin: 0; }
.selector-persona { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; margin: 0; }
.selector-persona label { font-size: 13px; font-weight: 600; }
h3.region { margin: var(--e4) 0 var(--e2); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); }
h3.region:first-of-type { margin-top: 0; }

/* La liga recién creada: que se lea completa y se pueda seleccionar. */
input.liga { font-size: 13px; }

/* Solo desarrollo (CRM_DEV_MARCO=1): /_movil enmarca una pantalla a 390 px. */
body.medir-movil { margin: 0; padding: 16px; background: #2c2a27; }
iframe.movil { display: block; border: 8px solid #111; border-radius: 22px; background: #fff; }

/* Logo de VAL-CO en la barra (5-oct). El PNG mide 252×176 (de sobra para 44 px de alto a 2×). */
.barra .marca { align-items: center; }
.barra .marca img { display: block; height: 44px; width: auto; }