/* Carril CONT: estilos propios de este carril. Se carga después de estilo.css; solo lo toca su dueño.
   Usa los tokens y las clases de estilo.css (contrato CSS): nada de colores sueltos ni de tamaños fuera de la escala. */

/* ═══════════════════════════════════════════════════════════ Inicio ══
   Dos contenedores con nombre, para que la portada se adapte a SU ancho y no al de la pantalla (con el menú lateral abierto una
   pantalla de 1280 px deja solo 910 px de contenido):
     · «ini» (todo el ancho): decide si la Actividad va a la derecha del todo o, si no cabe, debajo;
     · «inimain» (la columna principal): decide cuántas cifras y cuántas tarjetas caben en cada fila.
   Todas las rejillas llevan minmax(0, 1fr) y sus hijos min-width: 0, así ninguna cifra se sale de su tarjeta (ESTETICA2-03). */
/* La cabecera: título y frase a la izquierda (la frase se parte en dos líneas si hace falta) y los botones a la derecha, en la misma fila */
.cab-inicio h1, .cab-inicio p { overflow-wrap: anywhere; }
.cab-inicio h1 { font-size: var(--t-xl); }          /* 20-10: el saludo, un paso más pequeño que el título de las demás pantallas */
.ini-envoltorio { container: ini / inline-size; }
.ini { display: grid; gap: var(--e5); grid-template-columns: minmax(0, 1fr); align-items: start; }          /* (24 entre bloques; eran 16 hasta el 14-10) */
.ini-main { display: grid; gap: var(--e5); min-width: 0; container: inimain / inline-size; }
.ini-main > * { min-width: 0; }
.ini-rail { min-width: 0; }
@container ini (min-width: 900px) {
  .ini.con-rail { grid-template-columns: minmax(0, 1fr) clamp(264px, 26cqw, 320px); }
  /* La actividad se queda a la vista mientras se baja por la columna principal */
  .ini.con-rail .ini-rail { position: sticky; top: 0; }
}

/* Lo urgente: los impuestos que corren y lo que hay que hacer, lado a lado cuando caben */
.ini-urgente { display: grid; gap: var(--e5); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@container inimain (min-width: 700px) { .ini-urgente { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ini-urgente > * { min-width: 0; }
.ini-urgente .card > .cc { padding-top: var(--e3); }

/* Las cifras: cuatro pequeñas (dos por fila si la columna es estrecha) */
.ini-kpis { display: grid; gap: var(--e4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container inimain (min-width: 680px) { .ini-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ini-kpis.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ini-kpis .kpi { padding: var(--e4); display: grid; align-content: start; gap: 4px; }
.ini-kpis .kpi .v { font-size: var(--t-xl); margin-top: 0; }                    /* 20 px: la cifra secundaria de la escala */
.ini-kpis .kpi .v .imp .pal { font-size: var(--t-xs); font-weight: 500; }
.ini-kpis .kpi .s { margin-top: 0; }
.ini-kpis .kpi .s b { white-space: nowrap; }                  /* una cifra con su € no se parte en dos líneas */
.ini-kpis .kpi.oscuro { position: relative; }
/* La rayita del saldo, pequeña, junto al nombre de la tarjeta (la altura mínima que le pone nucleo.js en línea se anula a propósito) */
.ini-kpis .kpi.oscuro .spark { position: absolute; top: var(--e4); right: var(--e4); width: 64px; height: 22px; min-height: 0 !important; margin: 0; }
.ini-kpis .kpi.oscuro .spark svg { display: block; width: 100%; height: 100%; }
.ini-kpis .kpi.oscuro .spark-t { display: none; }          /* el pie escrito sobra: el texto ya lo lee quien usa lector de pantalla (aria-label) */
a.kpi:hover { border-color: var(--marca); }

/* «Qué hay que hacer»: una línea por cosa, de lo más urgente a lo que puede esperar */
.ini-hacer .tareas { gap: 8px; }
.ini-hacer .tarea { gap: var(--e3); padding: 9px var(--e3) 9px var(--e2); min-width: 0; }
.ini-hacer .tarea .ic { width: auto; min-width: 26px; height: 26px; padding: 0 5px; font-size: var(--t-xs); }
.ini-hacer .tarea .t, .ini-mod .t, .paso-p .t { display: grid; min-width: 0; flex: 1 1 0; }
.ini-hacer .tarea .t > .s, .ini-mod .t > .s, .paso-p .t > .s { font-size: var(--t-xs); color: var(--tenue); }
.ini-hacer .tarea .der { flex: none; font-weight: 500; white-space: nowrap; }
.ini-hacer .contador { margin-left: auto; }
/* En una columna estrecha (el móvil) el texto de una tarea baja de línea en vez de acabar en «…» («14 pagos vencidos sin hac…») */
@container inimain (max-width: 480px) { .ini-hacer .tarea .t > .trunc:first-child { white-space: normal; overflow: visible; text-overflow: clip; } }
.ini-hacer .pista { margin-top: var(--e2); }

/* Impuestos: cada modelo con su icono, lo que sale y, debajo, lo que viene después */
.ini-plazo { font-size: var(--t-sm); color: var(--tenue); margin-bottom: var(--e2); }
.ini-plazo b { color: var(--texto); font-weight: 600; }
.ini-mods { display: grid; gap: 8px; }
.ini-mod { display: flex; align-items: center; gap: var(--e3); padding: 9px var(--e3) 9px var(--e2); border-radius: var(--r); background: var(--fondo); font-size: var(--t-sm); min-width: 0; }
.ini-mod:hover { background: var(--hover); }
.ini-mod svg.ico-modelo { width: 24px; height: 24px; flex: none; color: var(--tenue); }
.ini-mod .der { flex: none; text-align: right; white-space: nowrap; font-weight: 500; }
.ini-urgente .card > .ct .eti { margin-left: var(--e1); }

/* Una empresa nueva */
.ini-pasos .progreso { margin-bottom: var(--e3); }
.ini-pasos-lista { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.ini-pasos-lista .paso-p { min-width: 0; }

/* Los dos listados (ESTETICA-11): lado a lado y de la misma altura si se parecen (inicio.js: iniListasApiladas); si no, uno debajo de otro, cada uno con su altura.
   Con «align-items: start» cada uno medía lo suyo y uno de ellos dejaba 486 px en blanco junto al otro. Cada lista lleva un tope de 5 filas. */
.ini-listas { display: grid; gap: var(--e5); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@container inimain (min-width: 700px) { .ini-listas:not(.apiladas) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ini-listas > * { min-width: 0; }
.lista-mini .it .t > b { display: block; font-weight: 500; }
.lista-mini .it .der b { font-weight: 500; font-variant-numeric: tabular-nums; display: block; }
.lista-mini .it .der .eti { margin-top: 2px; }

/* Actividad: la columna de la derecha. Cada apunte, en una línea, con quién y cuándo */
.ini-actividad { display: flex; flex-direction: column; max-height: calc(100vh - 190px); }          /* (menos la barra, las pestañas de Inicio y los márgenes) */
@container ini (max-width: 899px) { .ini-actividad { max-height: none; } }
.ini-actividad > .cc { overflow-y: auto; scrollbar-width: thin; }
.ini-actividad .linea-t { gap: var(--e4); }
.ini-actividad .ev { font-size: var(--t-sm); }
.ini-actividad .ev .ev-t { display: block; overflow-wrap: anywhere; text-wrap: pretty; }          /* sin una cifra o una palabra suelta en la última línea («…ya apuntados, 3» + «0») */
.ini-actividad .ev .ev-t span { display: inline; font-size: inherit; }          /* «.linea-t .ev span» (estilo.css) pone todos los span de un apunte en bloque: el «×3» y la última palabra se quedaban cada uno en su línea */
.ini-actividad .ev .ev-t .tenue { color: var(--tenue); }
.ini-actividad .ev .ev-m { display: block; margin-top: 1px; font-size: var(--t-xs); color: var(--tenue); }
.ini-actividad .ev .ev-m .eti { margin-right: 2px; }

/* Ventas → Resumen (ESTETICA-12): dos columnas, 2/3 y 1/3, y cada una apila sus tarjetas. Antes eran dos filas con columnas distintas (2/3 + 1/3 y 1/2 + 1/2): sus
   bordes no coincidían y las tarjetas de una misma fila dejaban 212 px en blanco bajo la más corta. Por debajo de 1200 px, una sola columna con el orden de siempre. */
.vr-cols { display: grid; gap: var(--e4); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.vr-col { display: grid; gap: var(--e4); min-width: 0; align-content: start; }
.vr-cob { grid-column: 1 / -1; }          /* (20-10) «Ir a» se quitó (repetía el menú de la izquierda): la gráfica y los mejores clientes arriba, y los próximos cobros a todo lo ancho debajo */
@media (max-width: 1200px) {
  .vr-cols { grid-template-columns: minmax(0, 1fr); }
  .vr-col { display: contents; }
  .vr-graf { order: 1; } .vr-mej { order: 2; } .vr-cob { order: 3; }
}

/* Panel de la gestoría y resumen de Ventas */
.fila.sin-salto { flex-wrap: nowrap; }
.barra-h i.barra-ventas { background: var(--g-ventas); }
a.subrayado { text-decoration: underline; }

/* En una pantalla estrecha no se enseñan todos los apuntes de la actividad: el resto está en «Ver todo» */
@container ini (max-width: 899px) { .ini-actividad .ev:nth-child(n+7) { display: none; } }

/* Móvil: una columna; los botones de la cabecera ya se parten solos */
@media (max-width: 720px) {
  .ini-kpis .kpi { padding: var(--e2) var(--e3); }
}

/* ═══════════════════════════════════════════════════ Inicio 2.0 ══
   «Todo muy apelotonado» (Iker, 17-10): más aire entre bloques, la Actividad fuera de su columna (pasa a una franja al final), las cifras más grandes y
   cada cosa con su sitio: lo urgente, las cifras, la gráfica con lo que se cobra y se paga (una sola tarjeta con pestañas) y, al final, lo último que ha pasado. */
.ini-v2 { gap: var(--e6); }
/* 20-10 (Iker: «todo muy grande, inspirémonos en Holded»): menos aire entre bloques (32 → 16) y dentro de las tarjetas (24 → 16), cifras y saludo un paso más pequeños */
.ini-v2 .ini-main { gap: var(--e4); }
.ini-v2 .ini-urgente, .ini-v2 .ini-cuerpo { gap: var(--e4); }
.ini-v2 .ini-urgente .card > .ct, .ini-v2 .ini-mov > .ct, .ini-v2 .ini-graf > .ct { padding-top: var(--e4); }
.ini-v2 .card > .ct, .ini-v2 .card > .cc { padding-left: var(--e4); padding-right: var(--e4); }
.ini-v2 .ini-urgente .card > .cc { padding-top: var(--e3); padding-bottom: var(--e4); }
/* los modelos: más bajos y más claros (el plazo ya lo dice la línea de arriba) */
.ini-v2 .ini-plazo { font-size: var(--t-sm); margin-bottom: var(--e3); }
.ini-v2 .ini-mods { gap: var(--e2); }
.ini-v2 .ini-mod { padding: var(--e3) var(--e4); background: var(--hover); }
.ini-v2 .ini-mod:hover { background: var(--linea-suave); }
.ini-v2 .ini-hacer .tareas { gap: var(--e2); }
.ini-v2 .ini-hacer .tarea { padding: var(--e3) var(--e4); border-color: var(--linea-suave); }

/* las cifras: grandes, con aire, y una barrita de lo vencido donde hay deuda */
.ini-v2 .ini-kpis { gap: var(--e4); }
.ini-v2 .ini-kpis .kpi { padding: var(--e4); gap: var(--e1); }
.ini-v2 .ini-kpis .kpi .k { font-size: var(--t-sm); }
.ini-v2 .ini-kpis .kpi .v { font-size: var(--t-xl); margin-top: var(--e1); }
.ini-v2 .ini-kpis .kpi .s { font-size: var(--t-xs); line-height: 1.5; margin-top: var(--e1); }
.ini-v2 .ini-kpis .kpi.oscuro .spark { top: var(--e4); right: var(--e4); }
.kpi-barra { height: 4px; margin-top: var(--e3); border-radius: var(--r-pill); background: var(--linea-suave); overflow: hidden; }
.kpi-barra i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--no-fg); }

/* la gráfica y lo que se cobra y se paga, lado a lado (2/3 y 1/3); en una columna estrecha, una debajo de otra */
.ini-cuerpo { display: grid; gap: var(--e6); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@container inimain (min-width: 900px) { .ini-cuerpo { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
.ini-cuerpo > * { min-width: 0; }
.ini-mov > .ct { gap: var(--e3); }
.ini-mov .segmentos button { gap: var(--e2); }
.ini-mov .segmentos .contador { height: 18px; min-width: 18px; line-height: 18px; padding: 0 var(--e2); }
.ini-mov .lista-mini .it { padding-left: 0; padding-right: 0; }
.ini-mov .sub-bloque { margin-top: var(--e4); }

/* en una columna estrecha (el móvil): las cifras y los espacios, más pequeños */
@container inimain (max-width: 679px) {
  .ini-v2 .ini-kpis { gap: var(--e3); }
  .ini-v2 .ini-kpis .kpi { padding: var(--e3) var(--e4); }
  .ini-v2 .ini-kpis .kpi .v { font-size: var(--t-xl); }
  .ini-v2 .ini-urgente, .ini-v2 .ini-cuerpo { gap: var(--e5); }
}
@container ini (max-width: 679px) { .ini-v2, .ini-v2 .ini-main { gap: var(--e5); } }
/* el pie de Impuestos: abajo del todo, con lo que suma y el botón */
.ini-urgente .card.ini-imp { display: flex; flex-direction: column; }
.ini-urgente .card.ini-imp > .cc { flex: 1; display: flex; flex-direction: column; }
.ini-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-top: auto; padding-top: var(--e4); border-top: 1px solid var(--linea-suave); font-size: var(--t-sm); }
.ini-pie b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ini-pie:not(:first-child) { margin-top: var(--e4); }
.ini-mods + .ini-pie { margin-top: auto; }
.ini-mods { margin-bottom: var(--e4); }
/* «Lo que le has pedido al cliente», vacío: una línea */
.peticiones-vacio { display: flex; align-items: center; gap: var(--e4); padding: var(--e3) var(--e5); flex-wrap: wrap; }
.peticiones-vacio b { font-size: var(--t-md); font-weight: 600; }
.peticiones-vacio .tenue { flex: 1 1 260px; font-size: var(--t-sm); }
/* la gráfica llena su tarjeta */
.ini-graf { display: flex; flex-direction: column; }
.ini-graf > .cc { flex: 1; display: flex; flex-direction: column; justify-content: center; }          /* (en columna: la nota «mes en curso» iba al lado de la gráfica y la dejaba a media tarjeta) */
.ini-graf > .cc > * { width: 100%; }

/* la actividad: una franja de lo último, a todo el ancho, en dos columnas (sin la columna fija de la derecha) */
.ini-v2 .ini-actividad { max-height: none; display: block; }
.ini-v2 .ini-actividad > .cc { overflow: visible; padding-top: var(--e4); }
.ini-v2 .ini-actividad .linea-t { gap: var(--e4) var(--e6); }
@container inimain (min-width: 820px) { .ini-v2 .ini-actividad .linea-t { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; } }
.ini-v2 .ini-actividad .linea-t::before { display: none; }
.ini-v2 .ini-actividad .linea-t .ev { padding-left: var(--e4); display: flex; align-items: baseline; justify-content: space-between; gap: var(--e4); min-width: 0; }
.ini-v2 .ini-actividad .linea-t .ev .ev-t { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ini-v2 .ini-actividad .linea-t .ev .ev-m { flex: none; margin-top: 0; white-space: nowrap; }
.ini-v2 .ini-actividad .linea-t .ev::before { left: 0; top: 7px; box-shadow: none; }
@container ini (max-width: 899px) { .ini-v2 .ini-actividad .ev:nth-child(n+7) { display: grid; } }
/* en un móvil el texto y su «quién · cuándo» no caben en una fila: el segundo pasa debajo y se puede partir */
@container ini (max-width: 560px) { .ini-v2 .ini-actividad .linea-t .ev { display: block; } .ini-v2 .ini-actividad .linea-t .ev .ev-m { display: block; white-space: normal; margin-top: 2px; } }

/* ═══════════════════════════════════════════════════════ Contactos ══ */
/* El avatar de cada contacto lleva el color de su tipo; la píldora (.eti-tipo, estilo.css) usa el mismo */
.avatar.av-cliente { background: var(--c-cliente); }
.avatar.av-proveedor { background: var(--c-proveedor); }
.avatar.av-ambos { background: var(--c-ambos); }
.avatar.av-empleado { background: var(--c-empleado); }
.avatar.grande { width: 52px; height: 52px; border-radius: var(--r); font-size: var(--t-lg); }
input.mayusculas { text-transform: uppercase; }
.filtros input[type=search] { flex: 1 1 260px; max-width: 460px; }
.filtros .chips { margin-left: auto; }
.tabla-ct td:first-child b { font-weight: 500; }
/* Las tres listas de Contactos (contactos.js): el nombre es la columna que se estira y acaba en «…»; el resto cede por el ancho de la caja (oc-*) */
.tabla-ct td.col-correo { max-width: 28ch; }
.tabla-ct td:first-child { width: 100%; max-width: 0; min-width: 18ch; }
.tabla-ct td:first-child .trunc { display: block; }
.tabla-ct td .sub2.b { color: var(--texto); font-weight: 500; }
.tabla-ct td:first-child .eti { vertical-align: 1px; margin-left: var(--e1); }
.tabla-ct th:not(:first-child), .tabla-ct td:not(:first-child) { white-space: nowrap; }
.tabla-ct td:not(:first-child) .sub2 { text-wrap: nowrap; }          /* estilo.css le pone text-wrap: pretty a .sub2, y eso anula el nowrap de la celda: «última 31 ago 2025» se partía en dos líneas */          /* las cifras y su «vencido» no se parten en dos líneas */
.tabla-ct td .sub2.neg { color: var(--no-fg); }          /* lo vencido, en rojo (.tabla .sub2 de estilo.css lo dejaba gris) */
.ficha-cab { display: flex; align-items: center; gap: var(--e4); min-width: 0; }
.ficha-cab > div { min-width: 0; }
.ficha-cab h1 { overflow-wrap: anywhere; }
.ficha-cols { display: grid; gap: var(--e4); align-content: start; min-width: 0; }
.ficha-notas .campo + .campo { margin-top: var(--e3); }
.fusion-resumen { display: grid; gap: var(--e2); margin-top: var(--e3); }
.fusion-resumen ul { margin: 0; padding-left: var(--e4); font-size: var(--t-sm); }
.fusion-resumen li + li { margin-top: 2px; }
.fusion-resumen .titulo { font-size: var(--t-xs); font-weight: 600; color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; }
.calidad-aviso { padding: 4px var(--e4) 0; }

/* La ficha: el bloque de cobros (mandatos y recordatorios, de cobros.js) se separa de los datos y sus dos apartados entre sí */
#ficha-cobros .cb-ficha { margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--linea-suave); }
#ficha-cobros .cb-ficha h4.mt-16 { margin-top: var(--e5); }

/* Móvil: cada contacto es una tarjeta corta, con el nombre arriba y NIF, facturado y gastado en una sola fila (no en tres líneas) */
@media (max-width: 720px) {
  .tabla-ct.apila tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2) var(--e3); padding: var(--e3) var(--e4); }
  .tabla-ct.apila td.mono { font-size: var(--t-xs); overflow-wrap: anywhere; }
}