/* Contactos como un fichero (contactos.js): a la izquierda la lista A–Z, con letras grandes que separan cada grupo (se
   quedan arriba al bajar) y el índice de letras al costado; a la derecha, sobre la mesa, la ficha del elegido como una
   tarjeta con su pestaña. Todo con los colores del espacio (espacio.css), de día y de noche; aquí solo se suman los de
   los canales y el de borrar. Los botones, el buscador y el «Volver» son los de «Tu equipo» (automatizaciones.css). */

.fichero {
  --canal-whatsapp: #1d7a55;
  --canal-web: var(--violeta);
  --canal-instagram: #b0306a;
  --canal-otro: #5f6470;
  --peligro: #b42332;
  --letra: var(--violeta);
  /* Las ventas en la línea de tiempo: el color de la marca de día, el acento de noche (el de la marca es muy oscuro). */
  --venta: var(--brand, var(--letra));
  /* Los puntos de la línea de tiempo que no tienen color de canal. */
  --tiempo-nota: #9a6a00;
  --tiempo-correo: #2563b0;
  --tiempo-linea: color-mix(in srgb, var(--texto-suave) 55%, transparent);
  container-type: inline-size;
}
html[data-theme="dark"] .fichero {
  --canal-whatsapp: #5fd3a2;
  --canal-web: var(--lavanda);
  --canal-instagram: #f08cba;
  --canal-otro: #a7acb8;
  --peligro: #ff9a9a;
  --letra: var(--lavanda);
  --venta: var(--acento, var(--lavanda));
  --tiempo-nota: #f2c46b;
  --tiempo-correo: #8fb8ff;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .fichero {
    --canal-whatsapp: #5fd3a2;
    --canal-web: var(--lavanda);
    --canal-instagram: #f08cba;
    --canal-otro: #a7acb8;
    --peligro: #ff9a9a;
    --letra: var(--lavanda);
    --venta: var(--acento, var(--lavanda));
    --tiempo-nota: #f2c46b;
    --tiempo-correo: #8fb8ff;
  }
}
/* La lista con la ficha necesita el ancho de la bandeja o más. */
[data-shown="contacts"] > main.wide { max-width: 80rem; }

/* ---------- Cabecera ---------- */

.fichero-cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.25rem; }
.fichero .fichero-cabeza h2 { margin: 0; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.05; letter-spacing: -0.02em; }
.fichero-bajada { margin: 0.4rem 0 0; color: var(--texto-suave); font-variant-numeric: tabular-nums; }

/* ---------- Lista y ficha ---------- */

/* Angosta: una cosa a la vez (data-pane). Ancha: la lista y la mesa con la ficha, cada una con su propio scroll. */
.fichero-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); overflow: clip; border: 1px solid var(--borde); border-radius: 1rem; background: var(--superficie); }
.fichero-lista, .fichero-mesa { min-width: 0; }
.fichero[data-pane="lista"] .fichero-mesa, .fichero[data-pane="detalle"] .fichero-lista { display: none; }
@container (min-width: 52rem) {
  .fichero-cuerpo { grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr); height: max(32rem, calc(100dvh - 13rem)); }
  .fichero[data-pane] .fichero-lista, .fichero[data-pane] .fichero-mesa { display: flex; }
  .fichero-lista { border-right: 1px solid var(--borde); }
  .fichero-mesa { overflow-y: auto; }
  .fichero .equipo-volver { display: none; }
}

.fichero-lista { display: flex; flex-direction: column; gap: 0.6rem; min-height: 0; padding: 1rem 0 0 1rem; }
.fichero-lista .equipo-buscar { margin-right: 1rem; }
.fichero-ocultos { margin: 0 1rem 0 0; color: var(--texto-suave); font-size: 0.8125rem; }
.fichero-cajon { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) 1.5rem; grid-template-rows: minmax(0, 1fr); min-height: 0; }
.fichero-filas { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 1rem; }
@container (max-width: 52rem) { .fichero-filas { max-height: 70dvh; } }

/* La letra del grupo: grande, en la letra de los títulos, y se queda arriba mientras se recorre su grupo. */
.fichero-letra {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 0.6rem 0.5rem 0.2rem;
  background: var(--superficie);
  color: var(--letra);
  font-family: var(--fuente-titulos);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
}
.fichero-letra.es-sin-nombre { color: var(--texto-suave); font-size: 1rem; padding-top: 1rem; }

.fichero-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 0.75rem;
  align-items: center;
  width: 100%;
  min-height: 3.25rem;
  margin: 0;
  padding: 0.5rem 0.5rem;
  border: 0;
  border-radius: 0.6rem;
  background: none;
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--mov-rapido) ease;
}
.fichero-fila-nombre { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.fichero-fila-cuando { color: var(--texto-suave); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.fichero-fila-dato { overflow: hidden; color: var(--texto-suave); font-size: 0.875rem; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fichero-fila .fichero-canal { justify-self: end; }
.fichero-fila[aria-current="true"] { background: var(--activo); }
.fichero-fila[aria-current="true"] :is(.fichero-fila-cuando, .fichero-fila-dato) { color: var(--texto); }
@media (hover: hover) and (pointer: fine) { .fichero-fila[aria-current="false"]:hover { background: var(--encima); } }
.fichero-fila:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.fichero-mas { margin: 0.75rem 0.5rem 0; }

/* El punto del canal por donde llegó. */
.fichero-canal { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--canal-otro); flex: none; }
.fichero-canal.es-whatsapp { background: var(--canal-whatsapp); }
.fichero-canal.es-web { background: var(--canal-web); }
.fichero-canal.es-instagram { background: var(--canal-instagram); }

/* El índice: todas las letras sirven; las que ya están en la lista se ven más fuertes. */
.fichero-indice { display: flex; flex-direction: column; justify-content: space-between; min-height: 0; overflow: hidden; padding: 0.25rem 0 1rem; }
.fichero-indice button { flex: 1; max-height: 1.6rem; margin: 0; padding: 0; border: 0; border-radius: 0.3rem; background: none; color: color-mix(in srgb, var(--texto-suave) 55%, transparent);
  font: inherit; font-size: 0.7rem; line-height: 1; cursor: pointer; }
.fichero-indice button.es-presente { color: var(--texto-fuerte); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .fichero-indice button:hover { background: var(--encima); color: var(--texto); } }
.fichero-indice button:focus-visible { outline: 2px solid var(--foco); outline-offset: -1px; }

/* ---------- La mesa y la ficha ---------- */

.fichero-mesa { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; background: var(--fondo); }
@container (min-width: 52rem) { .fichero-mesa { padding: 2.5rem 1.75rem 1.75rem; } }
.fichero-vacio { display: grid; flex: 1; place-items: center; padding: 2rem; border: 2px dashed var(--borde); border-radius: 0.75rem; color: var(--texto-suave); text-align: center; }
.fichero-vacio p { max-width: 36ch; margin: 0; }

/* La tarjeta con su pestaña arriba a la izquierda, que lleva la letra de su grupo. Entra como un cajón desde la lista. */
.fichero-ficha {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.9rem;
  padding: 1.5rem;
  border: 1px solid var(--borde);
  border-radius: 0 0.9rem 0.9rem 0.9rem;
  background: var(--superficie);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--tinta) 6%, transparent), 0 12px 32px -18px color-mix(in srgb, var(--tinta) 35%, transparent);
}
.fichero-ficha.es-entrando { animation: fichero-entra var(--mov-medio) var(--curva-cajon); }
@keyframes fichero-entra { from { opacity: 0; translate: calc(-12px * var(--mov-intensidad)) 0; } }
.fichero-pestana {
  position: absolute;
  top: -1.9rem;
  left: -1px;
  display: grid;
  place-items: center;
  min-width: 3.25rem;
  height: 1.9rem;
  padding: 0 0.9rem;
  border: 1px solid var(--borde);
  border-bottom: 0;
  border-radius: 0.6rem 0.6rem 0 0;
  background: var(--superficie);
  color: var(--letra);
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  font-weight: 700;
}
.fichero-ficha-cabeza { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1rem; }
.fichero-ficha-titulo { flex: 1 1 16rem; min-width: 0; }
.fichero-ficha-titulo h3 { margin: 0; color: var(--texto-fuerte); font-family: var(--fuente-titulos); font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 700; line-height: 1.1;
  overflow-wrap: anywhere; text-wrap: balance; }
/* El nombre recibe el foco al abrir la ficha (para el lector de pantalla), pero no es un control. */
body.espacio .fichero-ficha-titulo h3:is(:focus, :focus-visible) { outline: none; }
.fichero-ficha-titulo p { margin: 0.35rem 0 0; color: var(--texto-suave); font-size: 0.9rem; }
.fichero-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.fichero .equipo-boton.es-peligro { border-color: color-mix(in srgb, var(--peligro) 45%, transparent); color: var(--peligro); }

/* Los datos, entre dos líneas punteadas como los renglones de una ficha. */
.fichero-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.9rem 1.5rem; padding-block: 1rem; border-block: 1px dashed var(--borde); }
.fichero-dato { display: grid; align-content: start; gap: 0.15rem; min-width: 0; }
.fichero-dato.es-ancho { grid-column: 1 / -1; }
.fichero-dato > span { color: var(--texto-suave); font-size: 0.8125rem; }
.fichero-dato b { font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.fichero-bloques { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem 1.75rem; }
.fichero-bloque { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.fichero-bloque h4 { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 0.25rem; color: var(--texto-fuerte); font-size: 0.95rem; }
.fichero-bloque h4 small { color: var(--texto-suave); font-weight: 500; font-variant-numeric: tabular-nums; }
.fichero-bloque.es-notas { grid-column: 1 / -1; }
.fichero-nada { margin: 0; color: var(--texto-suave); font-size: 0.875rem; }

.fichero-renglon {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.15rem 0.6rem;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.4rem;
  border: 0;
  border-bottom: 1px solid var(--borde);
  border-radius: 0;
  background: none;
  color: var(--texto);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
}
.fichero-renglon:has(> .fichero-etapa) { grid-template-columns: minmax(0, 1fr) auto; }
.fichero-renglon small { grid-column: 1 / -1; color: var(--texto-suave); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
/* Un correo largo sin guiones no se sale del renglón; el punto del canal va junto a la primera línea. */
.fichero-renglon > span, .fichero-renglon small { overflow-wrap: anywhere; }
.fichero-renglon > .fichero-canal { align-self: start; margin-top: 0.45em; }
.fichero-renglon:has(> .fichero-canal) small { grid-column: 2 / -1; }
button.fichero-renglon { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { button.fichero-renglon:hover { background: var(--encima); } }
button.fichero-renglon:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.fichero-etapa { padding: 0.05rem 0.55rem; border-radius: 999px; background: var(--encima); font-size: 0.78rem; white-space: nowrap; }
.fichero-etapa.es-won { background: color-mix(in srgb, var(--canal-whatsapp) 22%, transparent); }
.fichero-etapa.es-lost { background: color-mix(in srgb, var(--peligro) 18%, transparent); }

/* Las notas del equipo: papel lavanda, con autor y fecha. */
.fichero-nota { display: grid; gap: 0.25rem; margin-bottom: 0.4rem; padding: 0.65rem 0.85rem; border-radius: 0.6rem; background: color-mix(in srgb, var(--lavanda) 16%, var(--superficie)); }
.fichero-nota p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fichero-nota small { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; color: var(--texto-suave); font-size: 0.8rem; }
.fichero-nota small .link { margin-left: auto; font-size: 0.8rem; }
.fichero-nota-nueva { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; margin-top: 0.25rem; }
.fichero-nota-nueva textarea { flex: 1 1 18rem; min-height: 2.75rem; margin: 0; padding: 0.6rem 0.75rem; border: 1px dashed var(--borde); border-radius: 0.6rem; background: var(--fondo);
  color: var(--texto); font: inherit; resize: vertical; }
.fichero-nota-nueva textarea:focus-visible { border-style: solid; outline: 2px solid var(--foco); outline-offset: 1px; }

/* ---------- Editar y crear ---------- */

.fichero-editar, .fichero-nuevo { display: flex; flex-direction: column; gap: 1rem; }
.fichero-campo { display: grid; gap: 0.3rem; margin: 0; color: var(--texto-suave); font-size: 0.8125rem; font-weight: 600; }
.fichero-campo :is(input, textarea), .fichero-otro input { min-height: 2.75rem; margin: 0; padding: 0 0.75rem; border: 1px solid var(--borde); border-radius: 0.6rem; background: var(--fondo);
  color: var(--texto); font: inherit; font-size: 1rem; font-weight: 400; }
:is(.fichero-campo, .fichero-otro) :is(input, textarea):focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.fichero-campo textarea { padding: 0.6rem 0.75rem; resize: vertical; }
.fichero-otros { display: grid; gap: 0.5rem; margin: 0; padding: 0; border: 0; }
.fichero-otros legend { margin-bottom: 0.4rem; color: var(--texto-suave); font-size: 0.8125rem; font-weight: 600; }
.fichero-otros .link { justify-self: start; }
.fichero-otro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
@container (max-width: 30rem) { .fichero-otro { grid-template-columns: minmax(0, 1fr) auto; } .fichero-otro input[name="other-value"] { grid-column: 1; } }
.fichero-dialogo { box-sizing: border-box; width: min(30rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto;
  background: var(--superficie); color: var(--texto); }
.fichero-dialogo .fichero-nuevo > p { margin: 0; }
.fichero-dialogo .equipo-boton:disabled { opacity: 0.45; }
.fichero-dialogo h3 { margin: 0; font-family: var(--fuente-titulos); }
.fichero-aviso { margin: 0; padding: 0.6rem 0.8rem; border-radius: 0.6rem; background: var(--encima); font-size: 0.9rem; }

/* ---------- Línea de tiempo (CRM, etapa 2a) ---------- */
/* Una línea vertical punteada, como los bordes de la tarjeta, con un punto por evento del color de su grupo. La línea
   va de punto a punto (cada fila dibuja su tramo hasta la siguiente), así termina en el último. */

.fichero-origen { margin: 0.15rem 0 0; color: var(--texto-suave); font-size: 0.875rem; }
.fichero-fecha { white-space: nowrap; }
.fichero-filtro { margin: 0 1rem 0.5rem 0; color: var(--texto-suave); font-size: 0.875rem; }
.fichero-bloque.es-tiempo { grid-column: 1 / -1; }
.fichero-bloque.es-tiempo > div > .equipo-boton { margin-bottom: 0.75rem; }
.fichero-tiempo { list-style: none; margin: 0.25rem 0 0.75rem; padding: 0 0 0 1.25rem; }
.fichero-tiempo li { position: relative; margin: 0; padding-bottom: 0.5rem; --punto: var(--canal-otro); }
.fichero-tiempo li:not(:last-child)::after {
  content: ''; position: absolute; left: calc(-1.25rem - 1px); top: 0.9rem; bottom: -0.55rem; border-left: 2px dashed var(--tiempo-linea);
}
.fichero-tiempo li::before {
  content: ''; position: absolute; left: calc(-1.25rem - 6px); top: 0.55rem; width: 10px; height: 10px; border-radius: 50%;
  background: var(--punto); box-shadow: 0 0 0 3px var(--superficie); z-index: 1;
}
.fichero-tiempo li.es-nota { --punto: var(--tiempo-nota); }
.fichero-tiempo li.es-correo { --punto: var(--tiempo-correo); }
.fichero-tiempo li.es-llegada { --punto: var(--letra); }
.fichero-tiempo li.es-chat { --punto: var(--canal-whatsapp); }
.fichero-tiempo li.es-venta { --punto: var(--venta); }
.fichero-tiempo li.es-cita { --punto: var(--canal-instagram); }
.fichero-tiempo li.es-falla { --punto: var(--peligro); }
.fichero-tiempo-fila {
  box-sizing: border-box; display: grid; gap: 0.1rem; width: 100%; padding: 0.3rem 0.5rem; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; border-radius: 6px;
}
button.fichero-tiempo-fila { cursor: pointer; }
button.fichero-tiempo-fila:hover { background: var(--fondo); }
button.fichero-tiempo-fila:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.fichero-tiempo-texto { overflow-wrap: anywhere; }
.fichero-tiempo-fila small { color: var(--texto-suave); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

/* El encabezado de la ficha no es el de una página: sin el ancho máximo ni el centrado de header (styles.css). */
.fichero .fichero-ficha-cabeza { max-width: none; margin: 0; }
/* «Borrar» de las notas con el rojo de la sección, que se lee también de noche. */
.fichero-nota .link.danger { color: var(--peligro); }

/* ---------- Permisos y derechos (CRM, etapa 5) ---------- */
.fichero-bloque.es-permisos .fichero-renglon { grid-template-columns: minmax(0, 1fr) auto; }
.fichero-bloque.es-permisos .fichero-renglon .link { grid-column: 1 / -1; justify-self: start; padding-block: 0.3rem; font-size: 0.85rem; }
.fichero-etapa.es-granted { color: var(--canal-whatsapp); }
.fichero-etapa.es-denied { color: var(--peligro); }
.fichero-etapa.es-nada { color: var(--texto-suave); }
.fichero-bloque.es-derechos .fichero-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fichero-tiempo li.es-permiso { --punto: var(--canal-whatsapp); }
.fichero-tiempo li.es-permiso-no { --punto: var(--peligro); }
.fichero-opciones { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; margin: 0 0 0.75rem; padding: 0; border: 0; }
.fichero-opciones legend { margin-bottom: 0.35rem; padding: 0; font-weight: 600; }
.fichero-opciones label { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; }
/* En oscuro la marca casi no se ve sobre el fondo: el radio marcado va con el color fuerte del texto. */
.fichero-opciones input { display: inline-block; width: auto; margin: 0; accent-color: var(--texto-fuerte); }

/* ---------- Juntar contactos (CRM, etapa 2b) ---------- */
.fichero-aviso.es-duplicado { margin: 0; line-height: 1.6; }
.fichero-aviso.es-duplicado .link { color: var(--texto-fuerte); font-weight: 600; }
.fichero-aviso.es-error { color: var(--peligro); }
.fichero-juntar-lista { display: grid; gap: 0.25rem; max-height: min(22rem, 50vh); overflow-y: auto; }
.fichero-juntar-lista .fichero-renglon { grid-template-columns: auto minmax(0, 1fr); }
.fichero-juntar-lista .fichero-renglon small { grid-column: 2 / -1; }

/* ---------- Listas, acciones masivas, responsable y campos (CRM, etapa 3) ---------- */
.fichero-fila-caja { display: flex; align-items: center; gap: 0.15rem; }
.fichero-fila-caja > .fichero-fila { flex: 1; min-width: 0; }
/* La casilla, con un área de toque cómoda (24 px) sin agrandar la fila. */
.fichero-elegir { flex: none; width: 1.35rem; height: 1.35rem; margin: 0 0 0 0.35rem; accent-color: var(--texto-fuerte); }
/* La barra va al pie de la lista: al aparecer no corre las filas. */
.fichero-masivo { display: grid; gap: 0.5rem; margin: 0 1rem 0.75rem 0; padding: 0.6rem 0.75rem; border-radius: 0.75rem; background: var(--encima); }
.fichero-masivo p { margin: 0; font-size: 0.9rem; }
.fichero-masivo .link { color: var(--texto-fuerte); font-weight: 600; }
.fichero-responsable { display: flex; align-items: center; gap: 0.4rem; max-width: 100%; margin: 0.5rem 0 0; color: var(--texto-suave); font-size: 0.875rem; }
.fichero-responsable select { flex: 1 1 auto; min-width: 0; max-width: 16rem; min-height: 2.5rem; margin: 0; padding: 0.3rem 0.5rem;
  border: 1px solid var(--borde); border-radius: 0.5rem; background: var(--fondo); color: var(--texto); font: inherit; }
.fichero-tope { color: var(--peligro); font-weight: 600; }
.fichero .link.danger { color: var(--peligro); }
.fichero-campos-lista .link { padding-block: 0.4rem; }
.fichero-campo input[type="file"] { min-height: auto; padding-block: 0.5rem; }
.fichero-campo input[type="file"]::file-selector-button { margin-right: 0.75rem; padding: 0.45rem 0.9rem; border: 1px solid var(--borde);
  border-radius: 0.6rem; background: var(--superficie); color: var(--texto); font: inherit; font-weight: 600; cursor: pointer; }
.fichero-aviso p { margin: 0; }
.fichero-dialogo .ce-dialog-head + .fichero-nuevo, .fichero-dialogo .ce-dialog-head + h4 { margin-top: 0.75rem; }
.fichero-nuevo h5 { margin: 0.25rem 0 0; font-size: 0.95rem; }
.fichero-campo select { min-height: 2.75rem; margin: 0; padding: 0 0.6rem; border: 1px solid var(--borde); border-radius: 0.6rem; background: var(--fondo);
  color: var(--texto); font: inherit; font-size: 1rem; font-weight: 400; }
.fichero-ajustes-campos { display: grid; gap: 0.6rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--borde); }
.fichero-ajustes-campos h4 { margin: 0; }
.fichero-dialogo > h4 { margin: 0 0 0.5rem; }
.fichero-campos-lista { display: grid; gap: 0.25rem; }
.fichero-campos-lista .fichero-renglon { grid-template-columns: minmax(0, 1fr) auto; }
.fichero-campos-lista .fichero-renglon small { grid-column: 1; }
.fichero-importar-columnas { display: grid; gap: 0.5rem; }
.fichero-aviso ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }

/* ---------- Tareas (CRM, etapa 4): la pestaña, la ficha y el panel de la venta ---------- */
/* La lista y el diálogo también van fuera del fichero (el panel de una venta, el diálogo sobre la página): su rojo. */
.tareas, .tarea-dialogo { --peligro: #b42332; }
html[data-theme="dark"] :is(.tareas, .tarea-dialogo) { --peligro: #ff9a9a; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) :is(.tareas, .tarea-dialogo) { --peligro: #ff9a9a; }
}
.fichero-pestanas { display: flex; gap: 0.25rem; margin-top: 0.75rem; }
.fichero-pestanas [role="tab"] { min-height: 2.5rem; padding: 0.35rem 0.9rem; border: 1px solid var(--borde); border-radius: 999px;
  background: none; color: var(--texto); font: inherit; font-weight: 600; cursor: pointer; }
.fichero-pestanas [role="tab"][aria-selected="true"] { border-color: var(--texto-fuerte); background: var(--texto-fuerte); color: var(--superficie); }
/* Personas o Tareas: la que no se ve, fuera (display: grid le gana a [hidden]). */
.fichero-cuerpo[hidden], .fichero-tareas[hidden], .fichero-empresas[hidden] { display: none; }
.fichero-tareas { padding: 1rem; overflow-y: auto; border: 1px solid var(--borde); border-radius: 1rem; background: var(--superficie); }
.tareas-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.tareas-cabeza h3 { margin: 0; font-family: var(--fuente-titulos); font-size: 1.15rem; }
.tareas-cabeza .fichero-bajada { margin: 0.15rem 0 0; }
.tarea small .link { color: inherit; font: inherit; text-decoration: underline; }
.tarea-aviso { margin: 0.75rem 0; color: var(--peligro); font-weight: 600; }
/* En las pestañas Tareas y Empresas no van las acciones de Personas (importar, exportar, ajustes, nuevo contacto). */
.fichero:is([data-tab="tasks"], [data-tab="companies"]) > .fichero-cabeza > .fichero-acciones { display: none; }
.tareas { display: grid; gap: 0.25rem; margin: 0 0 0.5rem; padding: 0; list-style: none; }
.tarea { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--borde); }
.tarea-casilla { display: grid; flex: none; place-items: center; width: 1.3rem; height: 1.3rem; margin-top: 0.15rem; cursor: pointer; }
.tarea-hecha { width: 1.3rem; height: 1.3rem; margin: 0; accent-color: var(--texto-fuerte); cursor: pointer; }
.tarea-cuerpo { display: grid; gap: 0.1rem; min-width: 0; }
.tarea-titulo { padding: 0; border: 0; background: none; color: var(--texto); font: inherit; font-weight: 600; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.tarea-titulo:hover { text-decoration: underline; }
.tarea small { color: var(--texto-suave); font-size: 0.8125rem; }
.tarea.es-vencida small { color: var(--peligro); font-weight: 600; }
.tarea.es-hecha .tarea-titulo { color: var(--texto-suave); text-decoration: line-through; }
.tareas.es-grande .tarea { padding-block: 0.7rem; }
/* Con el dedo: la casilla y el título con más zona para tocar, sin mover la fila (al final: pisa las de arriba). */
@media (pointer: coarse) {
  .tarea-casilla { width: 2.75rem; height: 2.75rem; margin: -0.75rem -0.45rem -0.75rem -0.7rem; }
  .tarea-titulo { padding-block: 0.45rem; margin-block: -0.45rem; }
}

/* ---------- Empresas (CRM, etapa 6): la pestaña, con el mismo fichero que Personas ---------- */
.empresas-buscar { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem; margin-right: 1rem; }
.empresas-buscar .equipo-buscar { flex: 1 1 12rem; margin-right: 0; }
.fichero-empresas .fichero-filas { flex: 1; padding-right: 1rem; }
.fichero-empresa { font: inherit; font-weight: 600; text-align: left; }
/* El dato «Empresa» de la ficha lleva a su empresa: un enlace con el color del texto (button.link pone el del sistema). */
.fichero-dato .fichero-empresa { color: var(--texto-fuerte); text-decoration-color: color-mix(in srgb, var(--texto-fuerte) 45%, transparent); text-underline-offset: 0.2em; }
/* «Agregar contacto» y los enlaces sueltos al pie de un bloque: a la izquierda, con el color del texto. */
.fichero-bloque > .link { align-self: flex-start; padding-block: 0.35rem; color: var(--texto-fuerte); font-weight: 600; }
.fichero-ficha-titulo h3.es-largo { font-size: 1.3rem; overflow-wrap: anywhere; }
.fichero-datos > .fichero-campo.es-ancho { grid-column: 1 / -1; }
.fichero-campo small { color: var(--texto-suave); font-size: 0.75rem; font-weight: 400; }
/* Una pista bajo un campo no descuadra a los de su fila. */
.fichero-editar .fichero-datos { align-items: start; }
.fichero-renglon:disabled { cursor: default; opacity: 0.6; }
/* La bajada de Personas («12 contactos con datos») no va en Tareas ni en Empresas. */
.fichero:is([data-tab="tasks"], [data-tab="companies"]) #contacts-summary { display: none; }
@media (pointer: coarse) {
  .fichero-dato .fichero-empresa { padding-block: 0.7rem; margin-block: -0.7rem; }
  .fichero-bloque > .link { padding-block: 0.75rem; margin-block: -0.4rem; }
}