/* ============================================================================
   Los widgets nuevos del Inicio (tren A2, plan «Inicio: mas widgets y botones»): Agenda y clientes, Ventas y mensajes, Fotografia.
   Lienzo aprobado: tableros 10 a 12 de «Inicio: widgets en tres tamanos».
   Solo tokens de cuarto-oscuro.css (--pag, --piedra, --tinta, --medio, --apagado, --e-*, --t-*, --r-*...): ningun color, sombra, tamano de letra ni duracion escritos a mano
   (paridad-cuarto-oscuro). Forma: pildora = se toca; 16 px = flota; 4 px = contenido. Filas sin cajas ni rayas. Color solo si significa algo (--urge para lo vencido o atrasado).
   Nada se anima con teclado ni en lo que se usa cien veces al dia; prefers-reduced-motion = fundidos.

   Se carga despues de cuarto-oscuro.css. Una TARJETA hereda el ancho de su COLUMNA, no el de la ventana (con el chat abierto el CRM mide ~420 px aunque la ventana mida 1280):
   el acomodo de adentro se decide por el ancho de la tarjeta (container query sobre .wi-cont, el envoltorio que cada widget pone dentro de su cuerpo), nunca por @media.
   NO se declara container-type en .widget: seria un cambio de TODAS las tarjetas del CRM, no de las nuevas.
   Una seccion por familia (los widgets de cada una se agregan bajo su ancla): prefijos wa- (agenda), wv- (ventas), wf- (foto).
   ============================================================================ */
.wi-cont{ container-type:inline-size; min-width:0; }

/* ---- A2 · Agenda y clientes ---- */
/* Piezas que comparten los widgets de la familia: una etiqueta chica, un numero grande, un enlace de texto, un titulo de grupo. */
.wa-eti{ font-size:var(--t-meta); line-height:1.4; color:var(--medio); }
.wa-num{ display:block; font-size:var(--t-titulo); font-weight:500; letter-spacing:-.02em; line-height:1.15; color:var(--tinta); font-variant-numeric:tabular-nums; }
.wa-link{ display:inline-block; min-height:32px; padding:0; border:0; background:transparent; font:inherit; font-size:var(--t-meta); color:var(--medio); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.wa-link:hover{ color:var(--tinta); }
.wa-grupo{ margin:0 0 var(--e-2); font-size:var(--t-meta); color:var(--apagado); }
.wa-nom{ display:block; font-size:var(--t-texto); font-weight:500; color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-sub{ display:block; margin-top:2px; font-size:var(--t-meta); color:var(--medio); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-quien{ display:block; min-width:0; color:inherit; text-decoration:none; }
/* Una fila de cita: hora, quien y que se hace con ella (o su estado). Sin rayas ni cajas. */
.wa-fila{ display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:var(--e-3); min-height:56px; }
.wa-hora{ font-size:var(--t-texto); color:var(--medio); font-variant-numeric:tabular-nums; }
.wa-der{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:var(--e-3); }
.wa-acc{ display:flex; align-items:center; gap:var(--e-2); }
.wa-estado{ font-size:var(--t-meta); color:var(--medio); white-space:nowrap; }
/* citas_hoy */
.wa-chico .wa-num{ margin:var(--e-1) 0 var(--e-1); }
.wa-barra{ height:4px; margin:var(--e-3) 0 var(--e-2); border-radius:var(--r-pildora); background:var(--piedra-on); position:relative; overflow:hidden; }
.wa-barra i{ position:absolute; left:0; top:0; bottom:0; border-radius:var(--r-pildora); background:var(--tinta); }
.wa-mediano .wa-filas{ margin-top:var(--e-2); }
.wa-mediano .wa-link{ margin-top:var(--e-2); }
.wa-kpis{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--e-4) var(--e-5); margin:var(--e-3) 0 var(--e-5); }
.wa-kpis .wa-eti{ display:block; margin-bottom:var(--e-1); }
.wa-dos{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--e-6); }
.wa-col{ min-width:0; }
/* La tarjeta, no la ventana, decide el acomodo: con el chat abierto el CRM mide ~420 px aunque la ventana mida 1280. */
@container (max-width:560px){
  .wa-dos{ grid-template-columns:minmax(0,1fr); gap:var(--e-4); }
  .wa-kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@container (max-width:420px){
  .wa-fila{ grid-template-columns:44px minmax(0,1fr); row-gap:var(--e-2); padding:var(--e-2) 0; }
  .wa-der{ grid-column:2; justify-content:flex-start; }
  .wa-acc{ width:100%; }
  .wa-acc .btn{ flex:1; min-height:44px; }
}
/* por_confirmar: una solicitud es quien, cuando vence y que se hace con ella. Lo que vence en menos de un dia va en color (--urge). */
.wa-cuenta{ display:flex; align-items:baseline; gap:var(--e-2); margin:var(--e-2) 0 var(--e-1); }
.wa-res{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:var(--e-3); min-height:56px; }
.wa-res-sola{ grid-template-columns:minmax(0,1fr) auto; }
.wa-urge{ color:var(--urge); font-weight:600; }
.wa-acc .wa-link{ display:inline-flex; align-items:center; }
.wa-dos-res{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.wa-col .wa-grupo:not(:first-child){ margin-top:var(--e-5); }
@container (max-width:560px){
  .wa-dos-res{ grid-template-columns:minmax(0,1fr); gap:var(--e-4); }
}
@container (max-width:420px){
  .wa-res{ grid-template-columns:minmax(0,1fr) auto; row-gap:var(--e-2); padding:var(--e-2) 0; }
  .wa-res > .wa-der{ grid-column:1 / -1; justify-content:flex-start; }
  .wa-res .wa-acc{ width:100%; justify-content:space-between; }
  .wa-res .wa-acc .btn{ flex:none; margin-left:auto; min-height:44px; }
}

/* por_volver: la lista usa las filas de por_confirmar (.wa-res) y el grande una tabla. Angosta, la tabla se apila: nombre y hace cuanto arriba, el servicio debajo y los botones al final. */
.wa-tabla{ margin-top:var(--e-2); }
.wa-tr{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) calc(var(--e-7) * 3); align-items:center; gap:var(--e-4); min-height:48px; font-size:var(--t-texto); color:var(--tinta); }
.wa-tr > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-tr > .wa-c-acc{ overflow:visible; display:flex; justify-content:flex-end; }
.wa-c-nom{ font-weight:500; }
.wa-c-srv, .wa-c-fecha{ color:var(--medio); }
.wa-th{ min-height:32px; font-size:var(--t-meta); font-weight:400; color:var(--apagado); }
@container (max-width:560px){
  .wa-th{ display:none; }
  .wa-tr{ grid-template-columns:minmax(0,1fr) auto; row-gap:var(--e-1); padding:var(--e-2) 0; }
  .wa-tr .wa-c-nom{ grid-column:1; grid-row:1; }
  .wa-tr .wa-c-hace{ grid-column:2; grid-row:1; color:var(--medio); }
  .wa-tr .wa-c-srv{ grid-column:1 / -1; grid-row:2; }
  .wa-tr .wa-c-fecha{ display:none; }
  .wa-tr .wa-c-acc{ grid-column:1 / -1; grid-row:3; }
  .wa-tr .wa-c-acc .wa-acc{ width:100%; justify-content:space-between; }
  .wa-tr .wa-c-acc .btn{ flex:none; margin-left:auto; min-height:44px; }
}

/* faltas: las 8 semanas en barras. La altura de cada barra es un porcentaje de la semana con mas faltas (la ultima, los ultimos 7 dias, en la tinta); el area mide tres veces --e-7. */
.wa-barras{ display:flex; align-items:stretch; gap:var(--e-2); height:calc(var(--e-7) * 3); margin:var(--e-2) 0 var(--e-3); }
.wa-bar{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:var(--e-1); font-size:var(--t-meta); color:var(--medio); font-variant-numeric:tabular-nums; }
.wa-bcol{ flex:1; width:100%; display:flex; align-items:flex-end; min-height:0; }
.wa-bi{ display:block; width:100%; min-height:var(--e-1); border-radius:var(--r); background:var(--piedra-on); }
.wa-bi.wa-hoy{ background:var(--tinta); }
.wa-dos-fal{ margin-top:var(--e-4); }

/* ---- A2 · Ventas y mensajes ---- */
/* Piezas que comparten los cuatro widgets: una etiqueta chica, una cifra grande, una fila (quien + estado), un enlace de texto y un titulo de columna. Sin cajas ni rayas; el color solo dice «urge». */
.wv-eti{ font-size:var(--t-meta); line-height:1.4; color:var(--medio); }
.wv-chico .wv-eti{ margin-top:var(--e-1); }
.wv-chico .wv-eti + .wv-fila{ margin-top:var(--e-3); }
.wv-num{ font-size:var(--t-titulo); font-weight:500; letter-spacing:-.02em; line-height:1.15; color:var(--tinta); font-variant-numeric:tabular-nums; }
.wv-cifra{ display:flex; align-items:baseline; gap:var(--e-3); margin:var(--e-1) 0 var(--e-2); }
.wv-grupo{ margin:0 0 var(--e-2); font-size:var(--t-meta); color:var(--apagado); }
.wv-nom{ display:block; font-size:var(--t-texto); font-weight:500; color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wv-nom b{ font-weight:600; }
.wv-sub{ display:block; margin-top:2px; font-size:var(--t-meta); color:var(--medio); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wv-quien{ display:block; min-width:0; flex:1 1 auto; color:inherit; text-decoration:none; }
.wv-fila{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); min-height:56px; }
.wv-fila-chica{ min-height:32px; }
/* Una fila de una sola linea sin boton (el nombre es la liga y el estado va al lado): mas baja que una con boton, pero con el alto de un toque. */
.wv-fila-compacta{ min-height:44px; }
/* Por que un cambio ya no se puede deshacer: debajo del nombre y en los renglones que haga falta (a la derecha le quitaba el ancho al nombre). */
.wv-motivo{ display:block; margin-top:2px; font-size:var(--t-meta); line-height:1.4; color:var(--medio); }
.wv-der{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:var(--e-3); flex:none; }
.wv-est{ font-size:var(--t-meta); color:var(--medio); white-space:nowrap; font-variant-numeric:tabular-nums; }
.wv-urge{ color:var(--urge); font-weight:600; }
.wv-link{ display:inline-block; min-height:32px; padding:0; border:0; background:transparent; font:inherit; font-size:var(--t-meta); color:var(--medio); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.wv-link:hover{ color:var(--tinta); }
.wv-des .wv-nom{ color:var(--medio); text-decoration:line-through; }
.wv-mediano .wv-filas{ margin-top:var(--e-2); }
.wv-mediano .wv-link{ margin-top:var(--e-2); }
.wv-grande .wv-link{ margin-top:var(--e-3); }
.wv-col{ min-width:0; }
.wv-cols{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--e-6); margin-top:var(--e-3); }
.wv-dos{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--e-6); margin-top:var(--e-3); }
/* embudo: una barra por etapa (4 px = contenido: la pista y el relleno no son pildoras, no se tocan). */
.wv-emb-dos{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--e-6); margin-top:var(--e-3); }
.wv-barras{ margin-top:var(--e-3); }
.wv-emb-dos .wv-barras{ margin-top:0; }
.wv-barra-fila{ display:flex; align-items:center; gap:var(--e-3); min-height:36px; }
.wv-etapa{ flex:none; width:104px; font-size:var(--t-texto); color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wv-pista{ position:relative; flex:1 1 auto; height:20px; border-radius:4px; background:var(--piedra-on); }
.wv-pista i{ position:absolute; left:0; top:0; bottom:0; border-radius:4px; background:var(--tinta); }
.wv-val{ flex:none; width:32px; text-align:right; font-size:var(--t-texto); font-variant-numeric:tabular-nums; color:var(--tinta); }
/* formularios: lo que cuenta cada formulario (texto, no pildoras) y la tabla del grande. */
.wv-chips{ display:flex; flex-wrap:wrap; gap:var(--e-1) var(--e-5); margin:var(--e-3) 0 var(--e-2); }
.wv-chip{ font-size:var(--t-meta); color:var(--medio); }
.wv-tabla{ margin-top:var(--e-3); }
.wv-tabla-fila{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.4fr) auto; align-items:center; gap:var(--e-4); min-height:48px; font-size:var(--t-texto); }
.wv-tabla-cab{ min-height:32px; font-size:var(--t-meta); }
.wv-celda{ min-width:0; color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; }
.wv-celda-extra, .wv-tabla-cab .wv-celda{ color:var(--medio); }
.wv-celda-der{ display:flex; justify-content:flex-end; }
/* La tarjeta, no la ventana, decide el acomodo: con el chat abierto el CRM mide ~420 px aunque la ventana mida 1280. */
@container (max-width:720px){
  .wv-cols{ grid-template-columns:minmax(0,1fr); gap:var(--e-4); }
}
@container (max-width:560px){
  .wv-emb-dos, .wv-dos{ grid-template-columns:minmax(0,1fr); gap:var(--e-4); }
  .wv-tabla-fila{ grid-template-columns:minmax(0,1fr) auto; }
  .wv-celda-extra, .wv-tabla-cab .wv-celda-der{ display:none; }
}
@container (max-width:420px){
  .wv-etapa{ width:84px; }
  .wv-fila:not(.wv-fila-chica){ flex-wrap:wrap; row-gap:var(--e-2); padding:var(--e-2) 0; }
  .wv-fila:not(.wv-fila-chica) .wv-quien{ flex-basis:100%; }
  .wv-fila:not(.wv-fila-chica) .wv-der{ flex:1 1 100%; justify-content:space-between; }
  .wv-der .btn{ min-height:44px; }
}

/* ---- A2 · Fotografia ---- */
/* Piezas que comparten los cuatro widgets de la familia: una etiqueta chica, un numero grande, un enlace de texto, el nombre y el subtitulo de una fila, lo urgente. */
.wf-eti{ font-size:var(--t-meta); line-height:1.4; color:var(--medio); }
.wf-num{ display:block; font-size:var(--t-titulo); font-weight:500; letter-spacing:-.02em; line-height:1.15; color:var(--tinta); font-variant-numeric:tabular-nums; }
.wf-link{ display:inline-block; min-height:32px; padding:0; border:0; background:transparent; font:inherit; font-size:var(--t-meta); color:var(--medio); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.wf-link:hover{ color:var(--tinta); }
.wf-grupo{ margin:0 0 var(--e-2); font-size:var(--t-meta); color:var(--apagado); }
.wf-nom{ display:block; font-size:var(--t-texto); font-weight:500; color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wf-sub{ display:block; margin-top:2px; font-size:var(--t-meta); color:var(--medio); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Las claves se guardan en caso natural («falta 2.º fotografo»): la primera letra la sube el CSS, no el texto. */
.wf-sub::first-letter{ text-transform:uppercase; }
.wf-quien{ display:block; min-width:0; color:inherit; text-decoration:none; }
.wf-urge{ color:var(--urge); font-weight:600; }
.wf-m{ color:var(--medio); }
/* Una fila: quien y, a la derecha, lo que pasa con ella. Sin cajas ni rayas. Es un enlace entero a la boda o a la galeria. */
.wf-fila{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--e-3); min-height:56px; color:inherit; text-decoration:none; }
.wf-fila.wf-con-dia{ grid-template-columns:44px minmax(0,1fr) auto; }
.wf-cifra{ display:flex; align-items:baseline; gap:var(--e-2); padding:var(--e-2) 0 var(--e-1); }
.wf-mediano .wf-filas, .wf-grande .wf-tabla{ margin-top:var(--e-2); }
.wf-mediano .wf-link, .wf-grande .wf-link{ margin-top:var(--e-2); }
/* equipo_faltante: el bloque de la fecha (dia grande, mes chico) y el «falta ...» de la derecha. */
.wf-dia{ text-align:center; }
.wf-dia b{ display:block; font-size:var(--t-titulo); line-height:1; font-weight:500; color:var(--tinta); font-variant-numeric:tabular-nums; }
.wf-dia span{ display:block; margin-top:2px; font-size:var(--t-meta); line-height:1.3; color:var(--medio); text-transform:uppercase; }
.wf-falta{ font-size:var(--t-meta); white-space:nowrap; text-align:right; }
/* La tabla del grande: una fila por boda, una columna por lugar del equipo (--wf-cols lo decide el numero de lugares). */
.wf-tabla{ --wf-cols:.7fr 1.5fr 1.5fr 1.4fr 1.4fr; }
.wf-tabla-3{ --wf-cols:.7fr 1.4fr 1.4fr 1.2fr 1.2fr 1.2fr; }
.wf-tr{ display:grid; grid-template-columns:var(--wf-cols); gap:var(--e-4); align-items:center; min-height:44px; color:inherit; text-decoration:none; font-size:var(--t-texto); }
.wf-th{ min-height:32px; font-size:var(--t-meta); color:var(--apagado); }
.wf-th > span::first-letter{ text-transform:uppercase; }
.wf-cel{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wf-fecha{ color:var(--medio); font-variant-numeric:tabular-nums; }
/* galerias_actividad: el numero de la derecha de una fila y las columnas del grande (tres listas y las mas vistas). */
.wf-cuenta{ font-size:var(--t-texto); color:var(--medio); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.wf-cuenta.wf-urge{ color:var(--urge); font-weight:600; }   /* con la clase sola ganaba .wf-cuenta, que viene despues: lo urgente no se veia urgente */
.wf-cols{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--e-6); margin-top:var(--e-3); }
.wf-col{ min-width:0; }
/* produccion: una linea de cifra del chico, los cuatro puntos de pasos de una fila y las dos columnas del grande (video y album). */
.wf-linea{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); min-height:32px; font-size:var(--t-texto); color:var(--tinta); }
.wf-pasos{ display:inline-flex; gap:var(--e-1); flex:none; }
.wf-pasos i{ display:block; width:8px; height:8px; border-radius:var(--r-pildora); box-shadow:inset 0 0 0 1px var(--medio); }
.wf-pasos i.on{ background:var(--tinta); box-shadow:none; }
.wf-dos{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--e-6); margin-top:var(--e-3); }
/* pared: un cuadro de foto (llena su caja, pastilla de vistas abajo a la izquierda), la pared de 3 columnas, el mosaico del grande (la primera foto ocupa 2 x 2) y la fotito de «la mas descargada». */
.wf-foto{ position:relative; display:block; min-width:0; background:var(--piedra-on); border-radius:var(--r); overflow:hidden; color:inherit; text-decoration:none; }
.wf-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.wf-foto b{ position:absolute; left:var(--e-2); bottom:var(--e-2); padding:2px var(--e-2); border-radius:var(--r-pildora); background:var(--piedra); color:var(--tinta); font-size:var(--t-meta); font-weight:500; line-height:1.4; font-variant-numeric:tabular-nums; }
.wf-foto-chico{ aspect-ratio:16 / 10; margin-top:var(--e-3); }
.wf-pie{ padding-top:var(--e-3); }
.wf-pared{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--e-2); margin-top:var(--e-3); }
.wf-pared .wf-foto{ aspect-ratio:1; }
/* El mosaico: la mas vista ocupa 2 x 2 y cuatro chicas llenan el rectangulo de al lado (5 fotos, sin huecos). La grande lleva su PROPIO aspect-ratio (cuadrada = dos chicas y un hueco): la imagen va en
   position:absolute y no da altura, asi que sin el la caja se colapsaba a una raya cuando no habia chicas al lado (una sola foto) o cuando la tarjeta es angosta. Solo se vio en un navegador. */
.wf-mosaico{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.wf-mosaico .wf-foto:first-child{ grid-column:span 2; grid-row:span 2; aspect-ratio:1; }
.wf-pared-n{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
.wf-pared-grande{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:var(--e-6); align-items:start; }
.wf-pared-grande.wf-sin-lado{ grid-template-columns:minmax(0,1fr); }
.wf-pared-grande .wf-pared{ margin-top:var(--e-3); }
.wf-pared-grande .wf-col{ padding-top:var(--e-3); }
.wf-pared-grande .wf-grupo:not(:first-child){ margin-top:var(--e-5); }
.wf-fila.wf-con-mini{ grid-template-columns:48px minmax(0,1fr); }
.wf-mini{ position:relative; display:block; width:48px; height:48px; background:var(--piedra-on); border-radius:var(--r); overflow:hidden; }
.wf-mini img{ width:100%; height:100%; object-fit:cover; display:block; }
/* La tarjeta, no la ventana, decide el acomodo: con el chat abierto el CRM mide ~420 px aunque la ventana mida 1280. Angosta, la tabla se APILA: la fecha al lado del nombre y cada lugar con su etiqueta. */
@container (max-width:700px){
  .wf-pared-grande{ grid-template-columns:minmax(0,1fr); gap:var(--e-4); }
}
@container (max-width:900px){
  .wf-cols{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--e-5) var(--e-6); }
}
@container (max-width:560px){
  .wf-th{ display:none; }
  .wf-tr:not(.wf-th){ grid-template-columns:56px minmax(0,1fr); column-gap:var(--e-3); row-gap:2px; padding:var(--e-2) 0; align-items:baseline; }
  .wf-tr:not(.wf-th) .wf-cel:not(.wf-fecha){ grid-column:2; }
  .wf-tr .wf-cel[data-et]::before{ content:attr(data-et) ": "; color:var(--medio); font-weight:400; }
  .wf-cols, .wf-dos{ grid-template-columns:minmax(0,1fr); gap:var(--e-4); }
}
@container (max-width:420px){
  .wf-pared{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  /* Angosto el mosaico son 2 columnas: la grande ocupa todo el ancho, en una sola fila y apaisada. */
  .wf-mosaico .wf-foto:first-child{ grid-row:auto; aspect-ratio:16 / 10; }
}

/* ============================================================================
   Inicio v3 · BOTONES PRINCIPALES (tren T1, plan PLAN-inicio-v3-2026-10; direccion «A · Tinta», elegida por Daniel el 5 oct; lienzo version 16, tablero 4).
   Cada boton es UN enlace (<a href>) con el dibujo de su area en SU color y su nombre debajo; TODO el boton abre la seccion. Sin ojo ni mas: crear vive dentro de cada seccion.
   El color (--area-*, cuarto-oscuro.css) solo dice de que area es el boton: nunca es rojo (--urge, urgencia) ni almagre (Xarpie), y nunca es lo unico que distingue a un boton (el nombre y el dibujo ya lo dicen).
   La distribucion la decide el ancho del BLOQUE (container query sobre .ba-wrap, que no tiene relleno propio), nunca la ventana: con el chat abierto el CRM mide ~420 px aunque la ventana mida 1280.
   Con 600 px o mas caben los cinco en UNA fila; con menos van en DOS (tres arriba y dos abajo, los dos de abajo mas anchos para que la fila no quede coja), tambien en el telefono. Nada se desliza ni queda escondido.
   Los container queries miden el CONTENIDO del contenedor: el dibujo (52cqw) mide el 52 % del contenido del propio boton, que es su propio contenedor.
   Solo tokens (paridad-cuarto-oscuro): forma = 16 px (--r-flota, flota); filas sin cajas ni rayas; el unico relleno es --piedra, porque estos botones son lo que manda en el Inicio.
   ============================================================================ */
.ba-wrap{ container-type:inline-size; container-name:ba; min-width:0; }
.ba-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--e-3); }
.ba-grid > .ba:last-child:nth-child(odd){ grid-column:1 / -1; }
.ba{ --ba-pad:var(--e-5) var(--e-2) var(--e-4); --ba-sep:var(--e-3); position:relative; container-type:inline-size; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--ba-sep); padding:var(--ba-pad); border-radius:var(--r-flota); background:var(--piedra); color:inherit; text-align:center; text-decoration:none;
  --ba-t:calc(140ms * var(--lento)); transition:transform var(--ba-t) var(--curva-entra); }
.ba-galerias{ --area:var(--area-galerias); }
.ba-eventos{ --area:var(--area-eventos); }
.ba-clientes{ --area:var(--area-clientes); }
.ba-calendario{ --area:var(--area-calendario); }
.ba-documentos{ --area:var(--area-documentos); }
.ba-trabajos{ --area:var(--area-trabajos); }
.ba-finanzas{ --area:var(--area-finanzas); }
.ba-edicion{ --area:var(--area-edicion); }
/* Plan inicio-carta T2 (D7, 4 nov 2026): en la barra de arriba, el icono de cada puerta lleva el matiz de su tarjeta. La palabra va siempre al lado: el color nunca es lo unico que
   distingue una puerta. Va aqui y no en nav-simple.css porque --area-* solo se usa en este archivo (paridad-inicio-areas). Inicio, Explorar y las chinchetas se quedan en tinta. */
body.nav-iconos #tabs .cp-navbtn[data-cat="clientes"] .cp-navico{ color:var(--area-clientes); }
body.nav-iconos #tabs .cp-navbtn[data-cat="eventos"] .cp-navico{ color:var(--area-eventos); }
body.nav-iconos #tabs .cp-navbtn[data-cat="calendario"] .cp-navico{ color:var(--area-calendario); }
body.nav-iconos #tabs .cp-navbtn[data-cat="edicion"] .cp-navico{ color:var(--area-edicion); }
body.nav-iconos #tabs .cp-navbtn[data-cat="galerias"] .cp-navico{ color:var(--area-galerias); }
body.nav-iconos #tabs .cp-navbtn[data-cat="dinero"] .cp-navico{ color:var(--area-finanzas); }   /* menu A: el turquesa de Trabajos (solo SIN fotografia): Edicion es solo CON fotografia, nunca comparten cuenta */
/* Menu A: la tarjeta con las pestanas de su seccion (inicio-botones.js, `tarjeta`). El dibujo y el nombre son el enlace de la seccion (.ba-a) y cada pestana un enlace aparte; la apagada es una que aun no existe.
   En reposo la tarjeta es SOLO dibujo y nombre, como las demas (Daniel, 4 nov: la lista entera arruinaba el diseno y en el telefono estiraba la fila). Las pestanas son un menu que se despliega debajo de la
   tarjeta al pasar el mouse, o al llegar con el teclado (sin animacion: nada se anima con teclado). Flota encima de lo que sigue y no empuja nada. Sin mouse (telefono, tableta) no se pinta: tocar la tarjeta
   abre la seccion, donde sus pestanas son los botones grandes de arriba (Daniel eligio esto el 4 nov).
   El enlace de la seccion cubre la tarjeta entera (::after): toda la tarjeta abre la seccion, como las que no tienen pestanas. */
.ba-a{ display:flex; flex-direction:column; align-items:center; gap:var(--ba-sep); max-width:100%; color:inherit; text-decoration:none; }
.ba-con-subs .ba-a::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.ba-subs{ display:none; }
@media (hover:hover){
  /* El menu: el de siempre de la app (--menu, 16 px, --sombra-menu, renglones con tinte). Aparece con el mouse quieto (--d-intencion, 300 ms) para no parpadear cuando solo cruza la fila,
     y se queda la gracia (--d-gracia, 500 ms) al salir: bajar en diagonal hacia el no lo cierra (plan inicio-carta T3, D10: los mismos tiempos que el menu de la barra). El puente invisible
     (::before) cubre el hueco entre la tarjeta y el menu. */
  .ba-subs{ position:absolute; top:calc(100% + var(--e-2)); left:0; right:0; z-index:1; display:flex; flex-direction:column; gap:2px; padding:6px;
    background:var(--menu); border-radius:var(--r-flota); box-shadow:var(--sombra-menu); text-align:left;
    opacity:0; visibility:hidden; transform:translateY(calc(-1 * var(--e-2)));
    transition:opacity var(--d-menu-sale) var(--curva-cambia) var(--d-gracia), transform var(--d-menu-sale) var(--curva-cambia) var(--d-gracia), visibility 0s linear calc(var(--d-gracia) + var(--d-menu-sale)); }
  .ba-subs::before{ content:""; position:absolute; left:0; right:0; bottom:100%; height:var(--e-2); }
  /* La tarjeta sube al pasar el mouse y BAJA hasta que termina la gracia: si bajara al instante, su menu (que sigue visible 500 ms) quedaria tapado por la fila de abajo
     (lo vio la duena del menu A, 4 nov). Por eso en reposo lleva un z-index entero (auto no se puede retrasar) y su transicion de z-index espera la gracia. */
  .ba-con-subs{ z-index:1; transition:transform var(--ba-t) var(--curva-entra), z-index 0s linear calc(var(--d-gracia) + var(--d-menu-sale)); }
  .ba-con-subs:hover, .ba-con-subs:focus-within{ z-index:3; transition:transform var(--ba-t) var(--curva-entra), z-index 0s; }
  .ba-con-subs:hover .ba-subs{ opacity:1; visibility:visible; transform:none;
    transition:opacity var(--d-menu) var(--curva-entra) var(--d-intencion), transform var(--d-menu) var(--curva-entra) var(--d-intencion), visibility 0s linear var(--d-intencion); }
  .ba-con-subs:focus-within .ba-subs{ opacity:1; visibility:visible; transform:none; transition:none; }
  .ba-sub{ position:relative; display:flex; align-items:center; min-height:36px; padding:8px 10px; border-radius:var(--r); font-size:var(--t-texto); color:var(--texto); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ba-sub:hover{ background:var(--tinte-toque); color:var(--tinta); }
  .ba-sub.off{ color:var(--medio); opacity:.55; }
  .ba.ba-con-subs:has(.ba-subs:active){ transform:none; }   /* pulsar una pestana del menu no hunde la tarjeta (el menu es hijo de la tarjeta y se hundiria con ella) */
}
@media (hover:hover) and (prefers-reduced-motion:reduce){ .ba-subs, .ba-con-subs:hover .ba-subs{ transform:none; } }
.ba-art{ display:block; flex:none; width:var(--ba-art, clamp(56px, 52cqw, 96px)); height:auto; aspect-ratio:1; color:var(--area); fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ba-art *{ vector-effect:non-scaling-stroke; }
.ba-art .ba-tf{ fill:var(--piedra); }
.ba-art .ba-ink{ fill:var(--tinta); stroke:none; }
.ba-art .ba-wash{ fill:color-mix(in srgb, var(--area) 18%, transparent); stroke:none; }
.ba-nom{ max-width:100%; font-size:var(--t-texto); line-height:20px; color:var(--medio); overflow-wrap:anywhere; }
/* Estados: con el cursor suma un tinte (el color no cambia) y el nombre se aclara; pulsado se hunde un poco; con el teclado dibuja el anillo de siempre (:focus-visible de cuarto-oscuro.css). Nada se anima con el teclado. */
.ba:hover{ box-shadow:inset 0 0 0 100px var(--tinte-toque); }
.ba:hover .ba-nom, .ba:focus-visible .ba-nom{ color:var(--tinta); }
.ba:active{ transform:scale(.97); box-shadow:inset 0 0 0 100px var(--tinte-toque); transition-duration:calc(60ms * var(--lento)); }
/* Menos de 600 px de bloque: DOS filas. Con cinco botones (la clase `n5` la pone inicio-botones.js) van tres arriba y dos abajo (los de abajo mas anchos); con otra cantidad, dos columnas y el ultimo, si queda solo, ocupa las dos.
   El dibujo mide lo mismo en los cinco (64 px; 80 con 390 px o mas): los de abajo son mas anchos y de otro modo un mismo Inicio tendria dos tamanos. */
@container ba (max-width:599px){
  .ba{ --ba-pad:var(--e-4) var(--e-2) var(--e-3); --ba-sep:var(--e-2); --ba-art:64px; }
  .ba-grid.n5{ grid-template-columns:repeat(6, minmax(0,1fr)); }
  .ba-grid.n5 > .ba{ grid-column:span 2; }
  .ba-grid.n5 > .ba:nth-child(n+4){ grid-column:span 3; }
}
@container ba (min-width:390px) and (max-width:599px){
  .ba{ --ba-art:80px; }
}
/* 600 px o mas: una fila de columnas iguales (cada boton mide el ancho del bloque, menos los huecos, entre cinco). */
@container ba (min-width:600px){
  .ba-grid, .ba-grid.n5{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); }
  .ba-grid > .ba, .ba-grid.n5 > .ba, .ba-grid.n5 > .ba:nth-child(n+4), .ba-grid > .ba:last-child:nth-child(odd){ grid-column:auto; }
}
/* Un bloque con botones principales NO es una tarjeta: el boton es lo unico con superficie (cada uno es su propio modulo de 16 px sobre --piedra) y la rejilla llega a los bordes del bloque, que no tiene relleno propio. La tarjeta de
   siempre del bloque de atajos (`.ib`, cuarto-oscuro.css) se quita aqui; las pildoras de debajo (la pregunta a Xarpie) conservan las suyas. Mas especifico que esa regla, no depende del orden de carga. */
:root[data-theme] .ib.ib-areas{ background:transparent; padding:0; border-radius:0; }
/* En pantalla tactil el asa y el `···` del bloque miden 44 px y SIEMPRE se ven (cuarto-oscuro.css): sobre los botones taparian el dibujo de la esquina de arriba a la derecha (con 100 px de ancho el dibujo mide 64). Un bloque de botones
   principales reserva esa franja arriba, solo ahi; con raton los dos botones son de 28 px y el asa solo aparece al pasar por el bloque, y no estorban. */
@media (pointer:coarse){
  :root[data-theme] .ib.ib-areas{ padding-top:44px; }
}

/* Menu A, Forma 1 (lienzo aprobado por Daniel el 3 nov 2026): dentro de una seccion, las pestanas son botones grandes con su dibujo (pintarSubtabs + public/nav-arte.js). Reusan .ba / .ba-<area> de
   este mismo archivo (forma de 16 px, --piedra, el trazo del dibujo): el boton manda en su fila igual que la tarjeta en el Inicio. Vive AQUI y no en cuarto-oscuro.css porque usa --area, que solo
   definen las clases .ba-<area> de este archivo (paridad-anatomia ANA-13). .ba fija --ba-pad/--ba-sep: aqui van con dos clases para ganarle. El margen de los lados lo pone cuarto-oscuro.css (es por ventana, y aqui los botones principales no se acomodan por ventana: humo-inicio-areas). NO es sticky (mide unos 120 px y taparia media pagina al bajar). Cinco columnas fijas: con dos o tres pestanas los botones miden lo mismo que en Clientes. La fila hereda el ancho de su COLUMNA
   (con el chat abierto el CRM mide ~420 px aunque la ventana mida 1280): por eso la vuelta a «deslizar de lado» la decide un container query sobre la fila, nunca la ventana. */
:root[data-theme] .subtabs.subtabs-grandes{ position:static; height:auto; padding-block:var(--e-3) var(--e-4); overflow:visible; box-shadow:none; container-type:inline-size; container-name:sbg; }
:root[data-theme] .subtabs.subtabs-grandes:not([hidden]){ display:block; }
/* .subtabs es una fila FLEX (styles.css) y alguna regla la vuelve a poner flex (el panel lateral, cuarto-oscuro.css): sin ancho propio la rejilla se encogia a su minimo y cada boton quedaba de 10 px. */
.sbg{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:var(--e-3); flex:1 1 auto; width:100%; min-width:0; }
.subtabs-grandes .sbg-b{ --ba-art:64px; --ba-pad:var(--e-4) var(--e-2) var(--e-3); --ba-sep:var(--e-2); width:100%; border:0; font:inherit; cursor:pointer; }
.subtabs-grandes .sbg-b.on{ box-shadow:inset 0 0 0 2px var(--area); }
.subtabs-grandes .sbg-b.on .ba-nom{ color:var(--tinta); }
.subtabs-grandes .sbg-b.off{ cursor:default; opacity:.55; }
.sbg-pronto{ font-size:var(--t-meta); color:var(--medio); }
@container sbg (max-width:700px){
  .sbg{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:112px; overflow-x:auto; scrollbar-width:none; }
  .sbg::-webkit-scrollbar{ display:none; }
  .subtabs-grandes .sbg-b{ --ba-art:44px; }
}
/* Telefono (Daniel, 12 nov: «los botones grandes de seccion ocupan un tercio de la primera pantalla»): en una fila de 520 px o menos cada boton es una PILDORA de 44 px con el
   dibujo chico y la palabra al lado. Medido a 390 px: la fila pasaba de ~180 px de alto a ~72, y la lista de la seccion sube eso. El dibujo y su color se quedan (el mismo
   NavArte, a 28 px): es la misma fila, apretada. container-type:normal porque .ba es contenedor de su ancho y un contenedor no se mide por su contenido: con columnas a la
   medida de cada palabra, cada pildora mediria cero. */
@container sbg (max-width:520px){
  .sbg{ grid-auto-columns:max-content; gap:var(--e-2); }
  .subtabs-grandes .sbg-b{ container-type:normal; --ba-art:28px; --ba-pad:0 var(--e-4) 0 var(--e-3); --ba-sep:var(--e-2); flex-direction:row; min-height:44px; border-radius:var(--r-pildora); }
  .subtabs-grandes .sbg-b .ba-nom, .sbg-pronto{ white-space:nowrap; overflow-wrap:normal; }
}

/* ---- Inicio v3 · «Lo siguiente» (public/inicio-siguiente.js, tren T2; lienzo aprobado por Daniel el 4 y 5 de octubre, tableros 6 y 6b) ----
   Un bloque SIN caja propia: la tarjeta es la del bloque entero (cuarto-oscuro.css, «UNA TARJETA POR BLOQUE», 7 oct; antes era plano, como el resto del lienzo). Adentro, el titulo y la cuenta regresiva a la derecha, la cita principal con su titulo de 24 px y lo que sigue
   debajo (una columna) o a la derecha (con 700 px o mas de BLOQUE). Se acomoda por el ancho de SU contenedor (consulta de contenedor), no por el de la ventana: con el chat abierto un «mitad» mide ~296 px
   aunque la ventana mida 1280 (menos 32 de relleno de la tarjeta). Solo tokens (paridad-cuarto-oscuro). Forma: pildora = se toca (los botones, de 44 px); filas sin cajas ni rayas. El color solo dice algo donde lo dice el sistema: nada aqui es rojo. */
.ws{ box-sizing:border-box; min-width:0; container-type:inline-size; container-name:ws; }
/* A la derecha del titulo van el asa y el `···` del bloque (inicio-libre.js los posiciona encima, dentro de la tarjeta: 8 px de su borde): 28 + 4 + 28 con raton, 44 + 4 + 44 en pantalla tactil; el relleno de la tarjeta (16) ya cubre una parte. La cuenta regresiva se queda a su izquierda. */
.ws-cab{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); min-height:16px; margin:0 0 var(--e-3); padding-right:calc(var(--e-6) * 2 - var(--e-2)); }
.ws-titulo{ margin:0; font-size:var(--t-meta); line-height:16px; font-weight:400; color:var(--apagado); }
.ws-der{ font-size:var(--t-meta); line-height:16px; color:var(--medio); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ws-t{ margin:0; font-size:var(--t-titulo); line-height:28px; font-weight:500; letter-spacing:-.01em; color:var(--tinta); overflow-wrap:anywhere; }
.ws-abre{ appearance:none; display:block; width:100%; margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; letter-spacing:inherit; text-align:left; cursor:pointer; overflow-wrap:anywhere; }
.ws-meta{ margin:var(--e-1) 0 0; font-size:var(--t-texto); line-height:20px; color:var(--medio); overflow-wrap:anywhere; }
.ws-pre{ margin:0 0 var(--e-2); font-size:var(--t-meta); line-height:16px; color:var(--medio); }
.ws-est{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:var(--e-2) 0 0; font-size:var(--t-meta); line-height:16px; color:var(--medio); }
.ws-est svg{ flex:none; }
.ws-prog{ height:4px; margin-top:var(--e-4); border-radius:var(--r-pildora); background:var(--piedra-on); overflow:hidden; }
.ws-prog i{ display:block; height:100%; border-radius:var(--r-pildora); background:var(--tinta); }
.ws-prog-t{ margin:var(--e-2) 0 0; font-size:var(--t-meta); line-height:16px; color:var(--medio); font-variant-numeric:tabular-nums; }
.ws-acc{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-4); }
.ws-b{ appearance:none; box-sizing:border-box; display:inline-flex; align-items:center; gap:var(--e-2); min-height:44px; margin:0; padding:0 var(--e-4); border:1px solid transparent; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font:inherit; font-size:var(--t-texto); font-weight:500; text-decoration:none; cursor:pointer;
  transition:transform calc(140ms * var(--lento)) var(--curva-entra); }
.ws-b:active{ transform:scale(.97); transition-duration:calc(60ms * var(--lento)); }
.ws-b svg{ flex:none; }
.ws-p{ background:var(--boton); color:var(--boton-t); }
.ws-linea{ background:none; border-color:var(--linea); }
.ws-xp{ display:block; flex:none; width:8px; height:8px; border-radius:var(--r-pildora); background:var(--marca-punto); }
.ws-lnk{ appearance:none; margin:0; padding:0 var(--e-1); border:0; background:none; color:var(--medio); font:inherit; font-size:var(--t-meta); line-height:16px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.ws-resto{ margin-top:var(--e-5); }
.ws-fila{ appearance:none; display:grid; grid-template-columns:44px 16px minmax(0,1fr); column-gap:var(--e-3); align-items:start; width:100%; min-height:44px; margin:0; padding:var(--e-2) 0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.ws-hr{ font-size:var(--t-texto); line-height:20px; color:var(--medio); font-variant-numeric:tabular-nums; }
.ws-ic{ display:flex; align-items:center; height:20px; color:var(--medio); }
.ws-q{ min-width:0; }
.ws-q b{ display:block; font-weight:500; font-size:var(--t-texto); line-height:20px; color:var(--tinta); overflow-wrap:anywhere; }
.ws-q small{ display:block; font-size:var(--t-meta); line-height:16px; color:var(--medio); overflow-wrap:anywhere; }
.ws-libre{ display:flex; align-items:center; gap:var(--e-3); min-height:32px; margin:0; padding-left:calc(44px + var(--e-3)); font-size:var(--t-meta); line-height:16px; color:var(--medio); }
@media (hover:hover){
  .ws-abre:hover, .ws-fila:hover .ws-q b{ text-decoration:underline; text-underline-offset:3px; }
  .ws-lnk:hover{ color:var(--tinta); }
}
/* Con 700 px o mas de BLOQUE (un «completo» sin chat) la cita queda a la izquierda y lo que sigue a la derecha. */
@container ws (min-width:700px){
  .ws-cuerpo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--e-7); align-items:start; }
  .ws-resto{ margin-top:0; }
}
/* Con menos de 420 px el titulo baja a 18 px y los botones se reparten el renglon. */
@container ws (max-width:419px){
  .ws-t{ font-size:var(--t-sub); line-height:24px; }
  .ws-acc .ws-b{ flex:1 1 auto; justify-content:center; }
}
/* En pantalla tactil el asa y el `···` miden 44 px y siempre se ven: la cuenta regresiva les deja sitio. */
@media (pointer:coarse){
  .ws-cab{ padding-right:calc(var(--e-6) * 3 - var(--e-2)); }
}

/* ---- «Proximas bodas con lo que falta» (Inicio v3, tren T4; lienzo tablero 7). Las clases `pb-*` solo las pinta public/inicio-bodas.js para una cuenta con el interruptor encendido. ----
   Una fila por boda, sin cajas: nombre y «fecha · lugar · en N dias» a la izquierda, UNA accion a la derecha y debajo los chips. Lo que YA esta va en tono suave con una palomita; lo que FALTA, con contorno y texto firme
   (nunca rojo: el rojo es solo del cobro vencido). Con 700 px de bloque o mas los chips suben al medio y la fila queda en una linea. La fila entera se toca (abre la boda). */
.pb-fila{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--e-2) var(--e-3); align-items:start; padding:var(--e-3); margin:0 calc(var(--e-3) * -1); border-radius:var(--r); cursor:pointer; }
.pb-fila:focus-visible{ outline:2px solid var(--tinta); outline-offset:-2px; }
.pb-id{ grid-column:1; grid-row:1; min-width:0; }
.pb-acc{ grid-column:2; grid-row:1; }
.pb-chips{ grid-column:1 / -1; grid-row:2; display:flex; flex-wrap:wrap; gap:6px var(--e-2); }
.pb-nom{ font-size:var(--t-texto); line-height:20px; font-weight:500; color:var(--tinta); overflow-wrap:anywhere; }
.pb-sub{ font-size:var(--t-meta); line-height:16px; color:var(--medio); }
.pb-chip{ display:inline-flex; align-items:center; gap:6px; min-height:28px; box-sizing:border-box; padding:0 var(--e-3); border:1px solid transparent; border-radius:var(--r-pildora); font-size:var(--t-meta); line-height:16px; background:var(--piedra-on); color:var(--texto); }
.pb-chip.no{ background:transparent; border-color:var(--punto); color:var(--tinta); font-weight:500; }
.pb-chip.todo{ background:var(--boton); border-color:transparent; color:var(--boton-t); font-weight:500; }
@container (min-width:700px){
  .pb-fila{ grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto; align-items:center; }
  .pb-chips{ grid-column:2; grid-row:1; }
  .pb-acc{ grid-column:3; }
}
/* Con el dedo el boton de la fila mide 44 px. */
@media (pointer:coarse){
  .pb-btn{ min-height:44px; }
}
/* Proximas bodas en las pantallas simples (F3 del Inicio perfecto): la fila ya no es un boton con otro boton adentro. Un boton nativo la cubre (patron `xb-abre` de «Para ti») y el de accion queda encima; el texto y los chips dejan pasar el toque. */
.pb-fila-s{ position:relative; cursor:default; }
.pb-fila-s > *{ position:relative; z-index:1; }
.pb-fila-s > .pb-abre{ position:absolute; inset:0; z-index:0; width:auto; min-height:0; padding:0; border:0; background:none; border-radius:inherit; cursor:pointer; }
.pb-fila-s > .pb-abre:focus-visible{ outline:2px solid var(--tinta); outline-offset:-2px; }
.pb-fila-s .pb-id, .pb-fila-s .pb-chips{ pointer-events:none; }
.pb-fila-s .pb-acc{ z-index:2; }

/* «Lo que hice» (cambios_xarpie con ventana hoy; F3 del Inicio perfecto, tablero 15): una frase por fila con su palomita, el cuando y el Deshacer o el Ver como enlace de texto. */
.wv-hice-fila{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:var(--e-2) var(--e-3); min-height:44px; padding:var(--e-2) 0; }
.wv-ok{ color:var(--medio); display:inline-flex; }
.wv-hice-t{ min-width:0; overflow-wrap:anywhere; font-size:var(--t-texto); color:var(--tinta); }
.wv-hice-t b{ font-weight:500; }
.wv-hice-c{ font-size:var(--t-meta); color:var(--medio); white-space:nowrap; }
.wv-hice-a{ display:inline-flex; align-items:center; gap:var(--e-3); }
.wv-hice-fila .wv-hice-a .btn.btn-sm{ min-height:32px; padding:0; border:0; background:transparent; font:inherit; font-size:var(--t-meta); color:var(--medio); text-decoration:underline; text-underline-offset:3px; }
.wv-hice-fila .wv-hice-a .btn.btn-sm:hover{ color:var(--tinta); background:transparent; }
.wv-hice-fila .wv-motivo{ grid-column:2 / -1; }
.wv-hice-fila.wv-des .wv-hice-t{ color:var(--medio); text-decoration:line-through; }
/* T5 («Lo que hice» honesto): la frase con por que es un boton que lo abre (sin forma de boton: se lee igual que la frase quieta); el por que va en UNA
   linea debajo, solo al tocar, en lugar de la linea que antes se repetia bajo cada fila; «Ver N mas» abre las demas filas en su lugar. */
button.wv-hice-t{ margin:0; padding:0; border:0; background:none; font:inherit; text-align:left; cursor:pointer; }
button.wv-hice-t:focus-visible{ outline:2px solid var(--tinta); outline-offset:2px; }
.wv-hice-pq{ grid-column:2 / -1; font-size:var(--t-meta); color:var(--medio); }
.wv-hice-mas{ display:inline-flex; align-items:center; min-height:44px; padding:0; }
.wv-nota{ margin:var(--e-3) 0 0; font-size:var(--t-meta); color:var(--medio); }
@container (max-width:420px){
  /* T5: en el telefono «Ver» o «Deshacer» va a la derecha de la frase (no en su propio renglon), el cuando debajo y el por que al final: una fila de tres renglones era una pantalla entera para tres cosas. */
  .wv-hice-fila{ grid-template-columns:auto minmax(0,1fr) auto; }
  .wv-hice-a{ grid-column:3; grid-row:1; }
  .wv-hice-c{ grid-column:2; grid-row:2; }
  .wv-hice-pq{ grid-column:2 / -1; grid-row:3; }
  .wv-hice-fila .wv-hice-a .btn.btn-sm, .wv-hice-a .wv-link{ min-height:44px; display:inline-flex; align-items:center; }
}
/* Galerias con todo en cero en las pantallas simples: una sola linea, no tres ceros. */
.wf-orden-t{ margin:0; }

/* ================= El Inicio como CARTA (plan ~/.claude/plans/PLAN-inicio-carta-2026-11.md, tren T4; lienzo «Inicio como carta», tableros 1a, 1d y 2a) =================
   Una columna que termina (app.js: inicioCartaActiva, `ini-carta` en #ini-raiz). Se lee sin leer: Te toca es una tarjeta clara con botones, Lo que hice una lista tenue con el punto de Xarpie y Lo siguiente
   la tarjeta con la fecha. Una regla de color: el icono de cada fila de Te toca es el color de la seccion donde vive (--area-*, el mismo de su puerta en la barra y en las tarjetas). Un solo boton relleno, el
   de la primera fila (D9): lo siguiente que hay que HACER hoy. Sin la oracion de resumen bajo el saludo (D12): las secciones ya lo dicen. */
:root[data-theme] .ini.ini-carta{ max-width:640px; }
/* Fuera de la carta: el parte de tres lineas y «Resumeme el dia» bajo el saludo (D12: las secciones ya lo dicen) y los encargos «Pidele a Xarpie» junto a las puertas (las puertas son solo puertas, D1). */
:root[data-theme] .ini.ini-carta :is(.inip-parte, .inip-res, .inip-enc){ display:none; }
:root[data-theme] .ini-carta-aviso{ margin:0; font-size:var(--t-meta); line-height:1.5; color:var(--medio); }
:root[data-theme] .ini-carta-fin{ grid-column:1 / -1; margin:0; font-size:var(--t-texto); color:var(--medio); }
/* Te toca: el icono vuelve a las filas (D11; el tablero 15 lo habia quitado) en un mosaico del color de su seccion. Lo que no vive en una seccion (una tarea, una pregunta) va en piedra. */
:root[data-theme] .ini.ini-carta .inb .inb-fila:not(.inb-lote) .xb-ico{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:36px; height:36px; border-radius:var(--r); background:var(--piedra-on); color:var(--medio); }
:root[data-theme] .ini.ini-carta .inb .inb-fila:not(.inb-lote) .xb-ico:is(.foco-ico-lead, .foco-ico-perfil){ color:var(--area-clientes); background:color-mix(in srgb, var(--area-clientes) 14%, transparent); }
:root[data-theme] .ini.ini-carta .inb .inb-fila:not(.inb-lote) .xb-ico.foco-ico-reserva{ color:var(--area-calendario); background:color-mix(in srgb, var(--area-calendario) 14%, transparent); }
:root[data-theme] .ini.ini-carta .inb .inb-fila:not(.inb-lote) .xb-ico.foco-ico-seleccion{ color:var(--area-edicion); background:color-mix(in srgb, var(--area-edicion) 14%, transparent); }
:root[data-theme] .ini.ini-carta .inb .inb-fila:not(.inb-lote) .xb-ico:is(.foco-ico-entrega, .foco-ico-galeria){ color:var(--area-galerias); background:color-mix(in srgb, var(--area-galerias) 14%, transparent); }
:root[data-theme] .ini.ini-carta .inb .inb-fila:not(.inb-lote) .xb-ico.foco-ico-cobro{ color:var(--area-finanzas); background:color-mix(in srgb, var(--area-finanzas) 14%, transparent); }
/* D9: el unico boton relleno de la carta es el de la PRIMERA fila de Te toca. */
:root[data-theme] .ini.ini-carta .inb .inb-filas > .inb-fila:first-child .xb-acciones .foco-btn{ background:var(--boton); color:var(--boton-t); }
/* ...y el de «Lo siguiente» se apaga mientras Te toca tenga algo: solo cuando no te toca nada (un dia vacio) vuelve a ser el relleno. */
:root[data-theme] .ini.ini-carta:has(.inb .inb-filas > .inb-fila) .ws-b.ws-p{ background:var(--piedra-on); color:var(--tinta); }
/* «Hoy ya hiciste N de M» junto al titulo de Te toca (T4b): texto chico y una barrita fina. Sin puntos ni rachas: solo lo que ya hiciste hoy. */
:root[data-theme] .carta-hiciste{ display:inline-flex; align-items:center; gap:var(--e-2); margin-left:var(--e-3); font-size:var(--t-meta); color:var(--medio); font-variant-numeric:tabular-nums; white-space:nowrap; }
:root[data-theme] .carta-barra{ display:inline-block; width:64px; height:4px; border-radius:var(--r-pildora); background:var(--piedra-on); overflow:hidden; }
:root[data-theme] .carta-barra > i{ display:block; height:100%; border-radius:var(--r-pildora); background:var(--ok); }
/* «Lo siguiente» en la carta (T4b): la proxima boda como hoja de calendario (la fecha grande en el azul de Calendario, la seccion donde vive), su titulo y «Ver la boda». */
:root[data-theme] .ws-hero.ws-boda{ display:flex; align-items:center; gap:var(--e-4); flex-wrap:wrap; }
:root[data-theme] .ws-fecha{ flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; width:64px; padding:var(--e-2) 0; border-radius:var(--r); background:color-mix(in srgb, var(--area-calendario) 14%, transparent); color:var(--area-calendario); line-height:1.1; text-transform:uppercase; }
:root[data-theme] .ws-fecha > span{ font-size:var(--t-meta); font-weight:600; letter-spacing:.04em; }
:root[data-theme] .ws-fecha > b{ font-size:var(--t-titulo); font-weight:500; }
:root[data-theme] .ws-boda-tx{ flex:1 1 200px; min-width:0; }
:root[data-theme] .ws-hero.ws-boda > .ws-acc{ margin-top:0; }
/* T4c: el pie callado de la carta («Personalizar tu inicio») y del Inicio de antes («Usar la carta»): un enlace, nunca un boton que compita con lo de arriba. */
:root[data-theme] .ini-carta-pie{ margin:0; font-size:var(--t-meta); color:var(--medio); }
/* T4d (tablero 1c) · La cuenta NUEVA: sin las partes vacias de la carta, con las secciones arriba y su paso, la zona para soltar y «Tu primera semana» despues. #ini-raiz es una columna (flex):
   el orden lo pone CSS, sin mover nada en el DOM. */
:root[data-theme] .ini-carta-intro, :root[data-theme] .ini-carta-soltar{ display:none; }
:root[data-theme] .ini.ini-carta-nueva > .ini-carta-intro{ display:block; margin:0; font-size:var(--t-texto); color:var(--texto); }
:root[data-theme] .ini.ini-carta-nueva .ini-principal > .ini-bloque:not([data-ini-id="botones"]), :root[data-theme] .ini.ini-carta-nueva .ini-carta-fin{ display:none; }
/* Tambien la linea «Lo demas esta en calma» (inicio-simple.js junta ahi los bloques vacios) y el aviso de arriba: los dos hablan de Te toca, Lo que hice y Lo siguiente, que aqui no se ven. La salida
   a su Inicio sigue al final («Personalizar tu inicio»). */
:root[data-theme] .ini.ini-carta-nueva :is(.inis-calma, .ini-carta-aviso){ display:none; }
:root[data-theme] .ini.ini-carta-nueva > #ini-semana{ order:2; }
:root[data-theme] .ini.ini-carta-nueva > .ini-carta-pie{ order:3; }
:root[data-theme] .ini.ini-carta-nueva .ba .ba-nom::after{ display:block; margin-top:2px; font-size:var(--t-meta); line-height:16px; color:var(--apagado); }
:root[data-theme] .ini.ini-carta-nueva :is(.ba-clientes, .ba-eventos) .ba-nom::after{ content:var(--carta-paso-clientes, ""); }
:root[data-theme] .ini.ini-carta-nueva .ba-calendario .ba-nom::after{ content:var(--carta-paso-calendario, ""); }
:root[data-theme] .ini.ini-carta-nueva .ba-edicion .ba-nom::after{ content:var(--carta-paso-edicion, ""); }
:root[data-theme] .ini.ini-carta-nueva .ba-galerias .ba-nom::after{ content:var(--carta-paso-galerias, ""); }
:root[data-theme] .ini.ini-carta-nueva .ba-finanzas .ba-nom::after{ content:var(--carta-paso-finanzas, ""); }
:root[data-theme] .ini.ini-carta-nueva > .ini-carta-soltar{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--e-2); padding:var(--e-5); border:1px dashed var(--punto); border-radius:var(--r-flota); background:var(--piedra); }
:root[data-theme] .ini-carta-soltar.encima{ border-style:solid; border-color:var(--tinta); }
:root[data-theme] .ini-carta-soltar-t{ margin:0; font-size:var(--t-sub); color:var(--tinta); }
:root[data-theme] .ini-carta-soltar-s{ margin:0; font-size:var(--t-meta); color:var(--medio); }
/* T4d (tablero 2d) · Dia de boda: «Lo siguiente» sube arriba y su primer boton es el UNICO relleno (D9); el de la primera fila de Te toca se apaga ese dia. */
:root[data-theme] .ini.ini-carta:has(.ws[data-boda-hoy="1"]) .ini-principal > .ini-bloque[data-ini-id="siguiente"]{ order:-1; }
:root[data-theme] .ini.ini-carta:has(.ws[data-boda-hoy="1"]) .ws-hero .ws-acc > .ws-b:first-child{ background:var(--boton); color:var(--boton-t); }
:root[data-theme] .ini.ini-carta:has(.ws[data-boda-hoy="1"]) .inb .inb-filas > .inb-fila:first-child .xb-acciones .foco-btn{ background:var(--piedra-on); color:var(--tinta); }
/* T4d (tablero 1d) · «Lo que hice» en la carta: una lista tenue con el punto de Xarpie, sin tarjeta. Ya hecho: mas chico y mas suave, para no competir con lo que te toca. */
/* La superficie es el bloque mismo (.ini-bloque), no el .widget de adentro. El punto es el de Xarpie (--marca-punto, el mismo de .ib-xp y del parte). */
:root[data-theme] .ini.ini-carta .ini-principal > .ini-bloque[data-ini-id="cambios_xarpie"]{ background:none; padding-inline:0; }
:root[data-theme] .ini.ini-carta .ini-bloque[data-ini-id="cambios_xarpie"] .w-title::before{ content:""; display:inline-block; width:8px; height:8px; margin-right:var(--e-2); border-radius:var(--r-pildora); background:var(--marca-punto); vertical-align:middle; }
:root[data-theme] .ini.ini-carta .ini-bloque[data-ini-id="cambios_xarpie"] .wv-hice-fila{ min-height:36px; padding:var(--e-1) 0; }
:root[data-theme] .ini.ini-carta .ini-bloque[data-ini-id="cambios_xarpie"] .wv-hice-t{ color:var(--texto); }

/* Plan inicio-carta T12a (tablero 6f): la pildora «Hablando de…» del chat lleva el matiz de la seccion donde vive su ficha (el mismo de su puerta en la
   barra y de su fila en la carta). Aqui y no en cuarto-oscuro.css: los --area-* viven en un solo archivo (paridad-inicio-areas). */
.chat-viendo[data-area="clientes"]{ --cv-area:var(--area-clientes); }
.chat-viendo[data-area="trabajos"]{ --cv-area:var(--area-trabajos); }
.chat-viendo[data-area="documentos"]{ --cv-area:var(--area-documentos); }
.chat-viendo[data-area="finanzas"]{ --cv-area:var(--area-finanzas); }

/* ==================== T7: la calma con tu foto (tableros 1b y 2b, D4) ====================
   Una portada de tus ultimas galerias publicadas, solo cuando Te toca esta en «nada» y la tarjeta ya tiene su foto (.lista). Sin foto, nada. */
.ini-carta-calma{ display:none; }
:root[data-theme] .ini.ini-carta:has(.inb[data-inb-estado="nada"]) .ini-carta-calma.lista,
.ini.ini-carta:has(.inb[data-inb-estado="nada"]) .ini-carta-calma.lista{ display:flex; flex-direction:column; gap:var(--e-2); margin:0 0 var(--e-4); color:var(--tinta); text-decoration:none; }
.ini-carta-calma-img{ width:100%; aspect-ratio:3 / 2; object-fit:cover; border-radius:var(--r-flota); background:var(--piedra); }
.ini-carta-calma-t{ font-size:var(--t-texto); color:var(--texto); }
.ini-carta-calma-t b{ font-weight:500; color:var(--tinta); }
.ini-carta-calma-s{ font-size:var(--t-meta); color:var(--medio); }
.ini-carta-calma:focus-visible{ outline:2px solid var(--tinta); outline-offset:4px; border-radius:var(--r-flota); }

/* ==================== T8a: cerrar el dia (tablero TelCierre, D5) ====================
   «Miercoles, cerrado.»: lo mejor de hoy, dos o tres cifras y «Buenas noches». Sin botones de «haz esto» (no es otra lista de atencion). */
.cierre{ display:flex; flex-direction:column; gap:var(--e-4); }
.cierre-eti{ margin:0; font-size:var(--t-meta); color:var(--medio); }
.cierre-mejor{ margin:calc(var(--e-2) * -1) 0 0; font-size:var(--t-texto); color:var(--texto); }
.cierre-mejor b{ font-weight:500; color:var(--tinta); }
.cierre-cifras{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:var(--e-3); }
.cierre-cifra{ display:flex; flex-direction:column; gap:var(--e-1); }
.cierre-n{ font-size:var(--t-titulo); color:var(--tinta); font-variant-numeric:tabular-nums; }
.cierre-k{ font-size:var(--t-meta); color:var(--medio); }
.cierre-manana{ margin:0; font-size:var(--t-texto); color:var(--texto); }
.cierre-acc{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-4); }

/* T9 del plan del Inicio: el icono de cada puerta de la barra de abajo del telefono, al color de su seccion (los --area-* viven solo aqui, paridad-inicio-areas). */
/* Y la puerta de vuelta del chat del telefono (#tel-a-crm, «Calendario ›» hecho icono el 12 nov): el MISMO dibujo y color que su puerta de abajo. */
.bi-puerta[data-area="clientes"] .bi-puerta-ico, #tel-a-crm[data-area="clientes"] .tel-a-crm-ico{ color:var(--area-clientes); }
.bi-puerta[data-area="calendario"] .bi-puerta-ico, #tel-a-crm[data-area="calendario"] .tel-a-crm-ico{ color:var(--area-calendario); }
.bi-puerta[data-area="edicion"] .bi-puerta-ico, #tel-a-crm[data-area="edicion"] .tel-a-crm-ico{ color:var(--area-edicion); }
.bi-puerta[data-area="galerias"] .bi-puerta-ico, #tel-a-crm[data-area="galerias"] .tel-a-crm-ico{ color:var(--area-galerias); }
.bi-puerta[data-area="finanzas"] .bi-puerta-ico, #tel-a-crm[data-area="finanzas"] .tel-a-crm-ico{ color:var(--area-finanzas); }

/* ==================== T10: «Hoy no te molesto» (tablero 2d) ====================
   Solo en un dia de boda («Lo siguiente» con data-boda-hoy) y solo al dueno (.lista la pone el JS para el dueno). Una linea tenue, sin tarjeta. */
.ini-carta-molesto{ display:none; }
:root[data-theme] .ini.ini-carta:has(.ws[data-boda-hoy="1"]) .ini-carta-molesto.lista,
.ini.ini-carta:has(.ws[data-boda-hoy="1"]) .ini-carta-molesto.lista{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--e-2); margin:0 0 var(--e-3); font-size:var(--t-meta); color:var(--medio); }
.ini-carta-molesto-t{ color:var(--texto); }