/* ficha.css -- las fichas fijas (cliente y boda), sus listas y el editor inline.
   Solo tokens de styles.css (--paper, --ink, --muted, --hair, --line2, --accent, --deep,
   --red): el tema oscuro los redefine y esto lo hereda sin una sola regla propia.
   Archivo aparte por la misma razon que ficha.js: styles.css recibe cambios de varias
   sesiones a la vez. Lo cubre evaluacion/sintaxis-css.mjs (paso 1 de verificar). */

/* ---- Pagina ---- */
.ficha{ max-width:960px; margin:0 auto; }
.ficha-secs{ display:flex; flex-direction:column; gap:18px; }
.fsec{ background:var(--paper); border:1px solid var(--hair); border-radius:var(--r); box-shadow:0 1px 3px rgba(41,40,36,.04); overflow:hidden; }
.fsec-h{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--hair); }
.fsec-t{ margin:0; font-family:var(--sans); font-size:var(--t-meta); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.fsec-h .w-quick:first-of-type{ margin-left:auto; }
.fsec-body{ padding:8px 16px 16px; }

/* Estado "Guardando… / Guardado", uno por pagina (aria-live). */
#ficha-savestate{ font-size:var(--t-meta); color:var(--muted); min-height:14px; }

/* ---- Migas ---- */
.migas{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:var(--t-meta); color:var(--muted); margin-bottom:10px; }
.miga{ color:var(--muted); text-decoration:none; }
@media (hover:hover){ a.miga:hover{ color:var(--ink); text-decoration:underline; } }
.miga-actual{ color:var(--ink); }
.miga-sep{ opacity:.5; }

/* ---- Editor inline (campoEditable) ----
   Reposo: un boton que se ve como texto. Editando: el mismo hueco con un input de la misma
   altura, para que nada salte. El lapiz aparece al pasar el mouse; en touch va siempre
   visible, porque sin hover nadie descubre que el dato se puede tocar. */
.ce-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px 18px; }
.ce{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; min-height:40px; padding:6px 8px; margin:0 -8px; box-sizing:content-box; border:0; border-radius:var(--r); background:transparent; color:var(--ink); font:inherit; text-align:left; position:relative; }
button.ce{ cursor:text; }
button.ce:focus-visible{ background:var(--deep); }
@media (hover:hover){ button.ce:hover{ background:var(--deep); } }
.ce .flabel{ margin:0; }
.ce-v{ font-size:var(--t-texto); line-height:1.3; color:var(--ink); word-break:break-word; }
.ce-vacio{ color:var(--muted); font-style:italic; }
.ce-largo{ white-space:pre-wrap; }
.ce-lapiz{ position:absolute; right:8px; top:8px; color:var(--muted); opacity:0; transition:opacity var(--dur-1) var(--ease-estado); }
button.ce:focus-visible .ce-lapiz{ opacity:.8; }
@media (hover:hover){ button.ce:hover .ce-lapiz{ opacity:.8; } }
.ce-ro{ cursor:default; }
.ce-editando{ cursor:auto; }
@media (hover:hover){ .ce-editando:hover{ background:transparent; } }
.ce-inp{ width:100%; box-sizing:border-box; }
.ce-inp.inp, .ce-inp.sel{ min-height:34px; padding:6px 10px; }
.ce-inp.ta{ min-height:72px; }
.ce-guardando{ opacity:.65; }
.ce-error{ outline:1.5px solid var(--red); outline-offset:1px; }
.ce-listo{ align-self:flex-end; margin-top:4px; }

/* Campo compacto: sin rotulo y en linea (los chips de la cabecera, el nombre en el titulo). */
.ce-inline{ display:inline-flex; flex-direction:row; align-items:center; gap:6px; width:auto; min-height:0; margin:0; padding:2px 6px; box-sizing:border-box; }
.ce-inline .ce-lapiz{ position:static; }
.ce-inline .ce-v{ font-size:inherit; }
.ce-inline.pill{ padding:3px 11px; }
.ce-inline.pill .ce-v{ font-size:var(--t-meta); line-height:1.2; color:inherit; }
.ce-editando.ce-inline .ce-inp{ width:auto; min-width:180px; }
.ce-grid-1{ grid-template-columns:minmax(0,1fr); margin-top:6px; }

/* ---- Cabecera de ficha: avatar, nombre, chips, acciones ---- */
.ficha-hero{ align-items:flex-start; }
.ficha-hero-izq{ display:flex; align-items:center; gap:16px; min-width:0; }
.ficha-hero-txt{ min-width:0; }
.ficha-avatar{ width:64px; height:64px; border-radius:100px; flex:none; background:var(--deep) center/cover no-repeat; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:var(--t-titulo); font-weight:400; color:var(--muted); letter-spacing:-.01em }
.ficha-avatar-ch{ width:40px; height:40px; font-size:var(--t-campo); }
.ficha-nombre{ margin:0; }
.ficha-nombre .ce{ font:inherit; letter-spacing:inherit; color:inherit; padding:0 4px; margin-left:-4px; }
.ficha-nombre .ce-v{ font-size:inherit; line-height:1; }
.ficha-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; font-size:var(--t-meta); color:var(--muted); }
.ficha-hero-acc{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* ---- Bodas del cliente: tarjeta con foto (compartida con la lista de Bodas) ---- */
.fc-bodas{ display:flex; flex-direction:column; gap:8px; }
.fc-boda{ display:flex; align-items:center; gap:14px; padding:10px; margin:0 -10px; border-radius:var(--r); color:inherit; text-decoration:none; }
@media (hover:hover){ .fc-boda:hover{ background:var(--deep); } }
.fc-boda-foto{ width:96px; height:72px; flex:none; border-radius:var(--r); background:var(--deep) center/cover no-repeat; display:flex; align-items:center; justify-content:center; color:var(--muted); }
.fc-boda-cuerpo{ min-width:0; flex:1; display:flex; flex-direction:column; gap:4px; }
.fc-boda-titulo{ font-family:var(--serif); font-size:var(--t-sub); font-weight:400; line-height:1.15; letter-spacing:-.01em }
.fc-boda-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.fc-boda-chips .cl-entregables{ margin:0; }
.fc-boda-dinero{ font-size:var(--t-meta); color:var(--muted); }
.fc-saldo-debe{ color:var(--red); }
.fc-saldo-ok{ color:var(--blue); }
.fc-boda-ir{ color:var(--muted); font-size:var(--t-sub); flex:none; }

/* ---- Documentos agrupados por boda ---- */
.fc-docgrupo + .fc-docgrupo{ margin-top:10px; }
.fc-docgrupo-h{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:var(--t-meta); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:8px 0 2px; }
.fc-docgrupo-ir{ font-size:var(--t-meta); letter-spacing:0; text-transform:none; color:var(--muted); text-decoration:none; }
@media (hover:hover){ .fc-docgrupo-ir:hover{ color:var(--ink); text-decoration:underline; } }

/* ---- Ficha de boda: portada a sangre, cuenta regresiva, siguiente paso, entregas ---- */
.fb-hero{ position:relative; border-radius:var(--r); overflow:hidden; background:var(--deep) center/cover no-repeat; min-height:240px; margin-bottom:18px; color:var(--ink); }
/* Sin portada real, .fb-hero tambien es .fondo (ver pintarHeroBoda): z-index explicito para
   que el orden quede textura -> velo de fondos.css -> este velo -> el cuerpo, sin depender
   de que nadie reordene el markup por accidente. */
.fb-hero-velo{ position:absolute; z-index:1; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.28) 45%, var(--paper) 100%); pointer-events:none; }
/* Sin portada real (fondo decorativo, no foto) este velo sobra: .fondo::after (fondos.css) YA
   protege el contraste del texto sobre la textura. Dejarlo activo aqui era protegerlo DOS
   VECES, y la segunda capa se apagaba a --paper solido justo donde vive el texto
   (.fb-hero-cuerpo esta abajo del todo): la textura quedaba practicamente invisible
   (reportado por Daniel viendo produccion, 2026-09-03). .fc-hero reusa el mismo div SIN la
   clase fb-hero-sinfoto -- sin esta regla heredaria el degradado negro de arriba, pensado
   para fotos, no para textura. */
.fb-hero-sinfoto .fb-hero-velo, .fc-hero .fb-hero-velo{ background:none; }
/* Aun asi seguia viendose apagado (reportado otra vez, mismo dia): el velo parejo de
   .fondo::after tiene que proteger CUALQUIER texto que pudiera caer encima, y --muted
   sobre esta textura no aguanta mas de ~10% de textura visible antes de romper 4.5 (medido
   con evaluacion/paridad-fondos.mjs, con margen de sobra -- no hay forma de subirle mas SIN
   otra proteccion). La salida: en este hero lo unico que es texto suelto directo sobre la
   textura son migas/subtitulo/cuenta (chips y botones ya traen su propio fondo solido, no
   les hace falta nada) -- se les da un halo del color de --paper (mismo principio que un
   rotulo de mapa sobre una foto) y con ESO ya se puede subir la textura mucho mas fuerte
   solo en este par de heros, sin tocar el velo compartido que protege todo lo demas. */
/* !important en las dos: index.html carga fondos.css DESPUES de ficha.css, asi que su
   :root{--fondo-opacidad,--fondo-velo} le gana a esta regla por orden de cascada (misma
   especificidad, una sola clase) SIN el !important -- confirmado en vivo, no a ojo: sin
   esto el navegador seguia calculando opacity:0.55 pese a que esta regla ya estaba en el
   archivo. */
.fb-hero-sinfoto, .fc-hero{ --fondo-opacidad:.95 !important; --fondo-velo:.25 !important; }
/* Halo mas fuerte para acompañar la subida de arriba (Daniel, misma sesion, "sigue muy
   opaco"): una capa casi solida pegada a la letra (1px/2px) ademas del resplandor suave,
   para que el texto no pierda filo cuando el fondo se pone mas saturado. */
.fb-hero-sinfoto .migas, .fb-hero-sinfoto .fb-sub, .fb-hero-sinfoto .fb-cuenta-n, .fb-hero-sinfoto .fb-cuenta-t, .fb-hero-sinfoto .tsub,
.fc-hero .tsub{ text-shadow:0 0 1px var(--paper), 0 0 2px var(--paper), 0 0 5px var(--paper), 0 0 9px var(--paper), 0 0 16px var(--paper); }
.fb-hero-cuerpo{ position:relative; z-index:2; padding:18px 22px 16px; display:flex; flex-direction:column; justify-content:flex-end; min-height:240px; box-sizing:border-box; }
.fb-hero .migas{ margin-bottom:auto; }
.fb-hero .phead{ border-bottom:0; margin-bottom:6px; padding-bottom:0; align-items:flex-end; }
.fb-sub{ font-size:var(--t-texto); color:var(--muted); margin-top:6px; }
.fb-cli{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line2); }
@media (hover:hover){ .fb-cli:hover{ border-color:var(--accent); } }
.fb-cuenta{ display:flex; flex-direction:column; align-items:flex-end; line-height:1; flex:none; }
.fb-cuenta-n{ font-family:var(--serif); font-size:46px; font-weight:400; color:var(--accent); letter-spacing:-.01em }
.fb-cuenta-t{ font-size:var(--t-meta); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.fb-cuenta-paso .fb-cuenta-n{ color:var(--muted); }
.fb-acc{ margin-top:12px; }
.fb-nota{ margin:6px 0 2px; }
.fb-nota a{ color:var(--accent); text-decoration:none; }
/* Chips que alternan (Incluye, cierre de entregas) */
.fb-incluye{ margin-top:12px; }
.fb-incluye-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.fb-inc{ cursor:pointer; border:1px solid transparent; font:inherit; }
.fb-inc:disabled{ cursor:default; }
@media (hover:hover){ .fb-inc.pill-ghost:hover:not(:disabled){ border-color:var(--accent); color:var(--ink); } }
.fb-cierre{ margin-top:14px; padding-top:12px; border-top:1px solid var(--hair); }

/* ---- Ficha de cliente: mismo tratamiento de fondo que .fb-hero (fondo decorativo estable
   por id + .fb-hero-velo), envolviendo el .phead.ficha-hero de siempre sin tocarlo. ---- */
.fc-hero{ position:relative; border-radius:var(--r); overflow:hidden; min-height:170px; margin-bottom:18px; }
.fc-hero-cuerpo{ position:relative; z-index:2; padding:18px 22px 14px; display:flex; align-items:flex-end; min-height:170px; box-sizing:border-box; }
.fc-hero .phead{ border-bottom:0; margin-bottom:0; padding-bottom:0; width:100%; }
@media (max-width:860px){
  .fc-hero, .fc-hero-cuerpo{ min-height:130px; }
  .fc-hero-cuerpo{ padding:14px 16px 12px; }
}

/* ---- Vacios con ave (vacioConAve, ficha.js): solo para "no hay nada de verdad", nunca
   para "nada con este filtro" (ese se queda como .empty de puro texto). ---- */
.vacio-ave{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:26px 16px; }
.vacio-ave-img{ width:min(220px,60vw); aspect-ratio:1; background:var(--ave) center/contain no-repeat; }
.vacio-ave p{ margin:0; }
.vacio-ave-sm{ padding:14px 12px; gap:6px; }
.vacio-ave-sm .vacio-ave-img{ width:80px; }

/* Tu siguiente paso: la tarjeta oscura del portal, en el idioma visual del CRM */
/* Invertida a proposito (tinta de fondo, papel de texto): en tema claro es la tarjeta
   oscura del portal; en oscuro es la tarjeta clara. Por eso NADA aqui usa un color fijo:
   el rotulo y el borde salen de --paper con opacidad, y funcionan en los dos temas. */
.fsec-next{ background:var(--ink); color:var(--paper); border-color:transparent; }
.fsec-next .fsec-h{ border-bottom-color:transparent; padding-bottom:0; }
.fsec-next .fsec-t{ color:var(--paper); opacity:.65; }
.fb-next{ position:relative; overflow:hidden; padding:6px 0 4px; }
/* z-index explicito (no solo confiar en el orden de apilamiento): la tarjeta ahora puede
   traer fondo.css encima (.fondo-invertido, ver ficha.js renderFbSiguiente) con su textura
   y velo en z:-2/-1 -- la mancha de acento tiene que seguir viendose por encima. */
.fb-next-hatch{ position:absolute; z-index:1; right:-60px; top:-70px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(201,100,66,.45), transparent 70%); pointer-events:none; }
.fb-next-t{ position:relative; font-family:var(--serif); font-size:var(--t-titulo); font-weight:400; line-height:1.1; letter-spacing:-.01em }
.fb-next-d{ position:relative; margin-top:6px; font-size:var(--t-texto); line-height:1.5; max-width:420px; opacity:.78; }
.fb-next-btn{ position:relative; margin-top:14px; background:var(--paper); color:var(--ink); border-color:transparent; }
.fb-next-btn-sec{ position:relative; margin-top:14px; margin-left:8px; color:var(--paper); border-color:var(--paper); }
@media (hover:hover){ .fb-next-btn-sec:hover{ background:rgba(255,255,255,.08); color:var(--paper); } }
/* Entregas */
.fb-ents{ display:flex; flex-direction:column; }
.fb-ents-apagadas{ opacity:.55; }
.fb-ent{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--hair); }
.fb-ent:last-child{ border-bottom:0; }
.fb-ent-ic{ color:var(--muted); flex:none; display:inline-flex; }
.fb-ent-ok .fb-ent-ic{ color:var(--blue); }
.fb-ent-m{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.fb-ent-t{ font-size:var(--t-texto); font-weight:500; }
.fb-ent-fecha{ font-size:var(--t-meta); color:var(--muted); padding:0; margin:0; }
.fb-ent-est{ cursor:pointer; font:inherit; border:1px solid transparent; }
.fb-ent-est:disabled{ cursor:default; }
.fb-ent-go{ white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.fb-etapa-click{ cursor:pointer; }
@media (hover:hover){ .fb-etapa-click:hover .evtl-etiq{ color:var(--accent); } }
.fb-flujo-link{ margin-top:10px; }
.fb-dia-cuest{ margin-top:12px; }

/* ---- Bodas: la lista ---- */
.lb-kpis{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-bottom:12px; }
.lb-kpi{ text-align:left; font:inherit; color:inherit; background:var(--paper); border:1px solid var(--hair); border-radius:var(--r); cursor:pointer; padding:14px 16px 12px; min-height:0; }
@media (hover:hover){ .lb-kpi:hover{ background:var(--deep); } }
/* Variante muda de la tira (pantalla Galerias, public/aprender.js): la tarjeta es un total,
   no un filtro. Le quita el dedito y el hover para que no prometa un clic que no existe.
   Vive aqui, junto a su regla base, y no con el resto de lo `gal-*`: quien lea .lb-kpi tiene
   que ver de una vez que hay una version que no se toca. */
.gal-kpi-mudo{ cursor:default; }
@media (hover:hover){ .gal-kpi-mudo:hover{ background:var(--paper); } }
/* La cuarta tarjeta de Galerias lleva miniatura, asi que su contenido va en fila en vez de
   apilado. No cambia .lb-kpi: solo reacomoda lo de adentro, para que las cuatro sigan
   midiendo igual y la tira no se descuadre. */
.lb-kpis-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.gal-kpi-foto-fila{ display:flex; gap:10px; align-items:center; min-width:0; }
/* El min-width:0 tiene que ir TAMBIEN en el hijo, no solo en el contenedor: un flex item
   nace con min-width:auto, o sea que crece hasta el ancho de su texto y el text-overflow de
   abajo no dispara nunca. Lo que se veria en su lugar es el recorte a hachazos de
   .stat{overflow:hidden}: "142 veces que la abr" cortado a media letra con un nombre largo. */
.gal-kpi-foto-fila > div{ min-width:0; }
.gal-kpi-thumb{ width:44px; height:44px; border-radius:var(--r); object-fit:cover; flex:none; }
.gal-kpi-foto-sub{ font-size:var(--t-meta); color:var(--muted); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gal-kpi-nota{ font-size:var(--t-meta); margin:0 0 12px; }
@media (max-width:1100px){ .lb-kpis-4{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.lb-kpi .statnum{ font-size:var(--t-titulo); }
.lb-aviso{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:var(--t-meta); color:var(--muted); margin:0 0 14px; }
.lb-aviso-link{ background:none; border:0; padding:0; font:inherit; color:var(--ink); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.lb-toolbar{ margin-bottom:10px; }
.lb-n{ opacity:.7; font-weight:400; margin-left:2px; }
.lb-filas{ display:flex; flex-direction:column; }
.lb-fila{ display:flex; align-items:center; gap:14px; padding:12px 8px; margin:0 -8px; border-radius:var(--r); border-bottom:1px solid var(--hair); color:inherit; text-decoration:none; }
@media (hover:hover){ .lb-fila:hover{ background:var(--deep); } }
.lb-foto{ width:72px; height:54px; flex:none; border-radius:var(--r); background:var(--deep) center/cover no-repeat; display:flex; align-items:center; justify-content:center; color:var(--muted); }
.lb-m{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.lb-t{ font-family:var(--serif); font-size:var(--t-campo); font-weight:400; line-height:1.15; letter-spacing:-.01em }
.lb-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.lb-ent{ cursor:pointer; font:inherit; font-size:var(--t-eti); display:inline-flex; align-items:center; gap:4px; border:1px solid transparent; }
.lb-ent:disabled{ cursor:default; }
.lb-sig{ font-size:var(--t-meta); color:var(--muted); }
.lb-der{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:none; }
.lb-cuenta{ flex:none; min-width:0; white-space:nowrap; }
.lb-paso{ color:var(--muted); }
.lb-saldo{ font-size:var(--t-meta); white-space:nowrap; }
.lb-mas{ display:flex; justify-content:center; padding:14px 0; }
.lb-pie{ display:flex; justify-content:center; padding:12px 0 6px; font-size:var(--t-texto); color:var(--muted); }
.lb-vacio{ padding:22px 0; }
@media (max-width:860px){
  .lb-kpis{ display:flex; overflow-x:auto; scrollbar-width:none; gap:8px; margin:0 -20px 12px; padding:0 20px; }
  .lb-kpis::-webkit-scrollbar{ display:none; }
  .lb-kpi{ flex:0 0 46%; }
  .lb-fila{ flex-wrap:wrap; gap:10px; }
  .lb-foto{ width:56px; height:42px; }
  .lb-der{ flex-direction:row; align-items:center; width:100%; justify-content:space-between; }
}

/* La tarjeta de galeria (renderWEvGaleria, app.js) es una fila fija de 64px + texto +
   boton; en la ficha de boda a 375px el boton se montaba sobre el chip "Borrador" (visto
   en la captura de movil de F5). Aqui se envuelve: el boton baja a su propio renglon. */
@media (max-width:860px){
  .ficha .gal-resumen{ flex-wrap:wrap; }
  .ficha .gal-resumen > div:not(.gal-resumen-cover){ flex:1 1 150px; min-width:0; }
  .ficha .gal-resumen .btn{ flex:1 1 100%; justify-content:center; margin-top:4px; }
}

/* ---- Cabecera pegajosa de movil (la arma fichaMiniPegajosa) ---- */
.ficha-mini{ display:none; }
@media (max-width:860px){
  /* fixed y no sticky: la ficha vive dentro de un contenedor con overflow (visto en vivo:
     con sticky la franja se iba a -3000px con el scroll). En movil el borde superior de
     la ventana esta libre -- la nav es el cajon de abajo -- asi que fixed no tapa nada. */
  .ficha-mini{ position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; gap:10px; min-height:52px; padding:6px 16px; padding-top:calc(6px + env(safe-area-inset-top, 0px)); margin:0; background:var(--paper); border-bottom:1px solid var(--hair); box-shadow:0 2px 10px rgba(0,0,0,.08); }
  .ficha-mini[hidden]{ display:none; }
  .ficha-mini-nombre{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--serif); font-size:var(--t-texto); letter-spacing:-.01em }
  .ficha-mini-cta{ flex:none; }
}

/* ---- Clientes: el directorio ---- */
.dir-vacio{ padding:22px 0; }

/* ---- Detalles plegados, pistas y la franja de Xarpie ---- */
.fc-details summary{ cursor:pointer; font-size:var(--t-meta); color:var(--muted); padding:6px 0; }
.fsec-pista{ margin:6px 16px 14px; }
.fsec-xarpie{ border-color:var(--accent); }
.fsec-xarpie .fsec-t{ color:var(--accent); }

@media (hover:none){
  .ce-lapiz{ opacity:.55; }
}
@media (max-width:860px){
  .ficha-secs{ gap:14px; }
  .ce-grid{ grid-template-columns:minmax(0,1fr); }
  .ce{ min-height:44px; }
  /* 16px evita que iOS haga zoom al enfocar el campo. */
  .ce-inp{ font-size:var(--t-campo); }
  .ficha-hero-izq{ gap:12px; }
  .ficha-avatar{ width:52px; height:52px; font-size:var(--t-sub); }
  .fc-boda-foto{ width:72px; height:54px; }
  .fc-boda-titulo{ font-size:var(--t-sub); }
  .fb-hero, .fb-hero-cuerpo{ min-height:180px; }
  .fb-hero-cuerpo{ padding:14px 16px 14px; }
  .fb-cuenta{ align-items:flex-start; margin-top:8px; }
  .fb-cuenta-n{ font-size:40px; }
  .fb-next-t{ font-size:var(--t-titulo); }
  .fb-ent{ flex-wrap:wrap; }
  .fb-ent-go{ width:100%; justify-content:center; }
}