/* portal-simple.css -- el PANEL DE CADA CLIENTE simple (plan PLAN-panel-cliente-simple-2026-10, fase F1; lienzo aprobado el 15 oct 2026). Solo tokens de Cuarto Oscuro (public/cuarto-oscuro.css).
   Todo cuelga de `.ps-panel` (la raiz que pone public/portal-simple.js): sin `estudio.panel_simple` nada de esto se pinta y el panel es el de hoy byte a byte.
   Forma: pildora = se toca (botones, estado); 16 px = flota (las tarjetas de la columna); 4 px = contenido. Filas sin cajas ni rayas. Nada se anima con teclado ni en lo que se usa cien veces al dia.
   El ancho que cuenta es el de la COLUMNA, no el de la ventana (con el chat abierto al CRM le tocan ~420 px aunque la ventana mida 1280): por eso todo es container query de `.ficha-portal`
   (styles.css: container-type:inline-size), nunca media query. */

/* ------------------------------------------------------------ la cabecera unica */
.ps-panel .ps-cab-in{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--e-4) var(--e-5); margin-top:var(--e-2); }
.ps-panel .ps-cab-id{ display:flex; align-items:center; gap:var(--e-4); min-width:0; flex:1 1 360px; }
.ps-panel .ps-av{ flex:none; width:52px; height:52px; border-radius:var(--r-pildora); display:flex; align-items:center; justify-content:center; background:var(--piedra-on); color:var(--medio); font-size:var(--t-campo); font-weight:600; }
.ps-panel .ps-cab-txt{ min-width:0; }
.ps-panel .ps-cab-n{ margin:0; font-size:var(--t-saludo); font-weight:500; letter-spacing:-.02em; line-height:1.15; color:var(--tinta); overflow-wrap:anywhere; }
.ps-panel .ps-cab-n .ce{ font:inherit; letter-spacing:inherit; color:inherit; padding:0 4px; margin-left:-4px; }
.ps-panel .ps-cab-n .ce-v{ font-size:inherit; line-height:1.15; }
.ps-panel .ps-cab-linea{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2) var(--e-3); margin-top:6px; }
.ps-panel .ps-cab-dato{ font-size:var(--t-texto); color:var(--medio); }
.ps-panel .ps-estado{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font-size:var(--t-meta); font-weight:500; white-space:nowrap; }
.ps-panel .ps-estado i{ display:inline-block; width:7px; height:7px; border-radius:var(--r-pildora); background:var(--tinta); }
.ps-panel .ps-contrato{ display:inline-flex; align-items:center; gap:5px; padding:0; border:0; background:none; color:var(--tinta); font:inherit; font-size:var(--t-meta); cursor:pointer; }
.ps-panel .ps-contrato span{ text-decoration:underline; text-underline-offset:3px; }
.ps-panel .ps-cab-citas{ margin-top:var(--e-2); }
.ps-panel .ps-cab-acc{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); }
.ps-panel .ps-cab-acc .btn{ min-height:40px; }
/* Los botones sin relleno de la cabecera llevan su contorno fino (el lienzo): sin el, «Compartir su portal» y «⋯» no parecen botones. */
.ps-panel .ps-cab-acc .btn-gh{ box-shadow:inset 0 0 0 1px var(--linea); }
.ps-panel .ps-mas{ width:40px; padding:0; }
/* Con una columna angosta (el chat abierto, el telefono) «Compartir su portal» se queda en el icono: el nombre sigue en su aria-label. */
@container (max-width: 640px){
  .ps-panel .ps-compartir{ width:40px; padding:0; }
  .ps-panel .ps-compartir-t{ display:none; }
  .ps-panel .ps-cab-n{ font-size:var(--t-titulo); }
  .ps-panel .ps-av{ width:40px; height:40px; font-size:var(--t-texto); }
  .ps-panel .ps-cab-id{ flex-basis:100%; }
}

/* Tren 1 del portal como la carta (P4): telefono y correo bajo la cabecera, solo cuando la columna del cliente NO esta al lado (la misma medida de abajo). */
.ps-panel .ps-cab-contacto{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-1) var(--e-2); font-size:var(--t-meta); color:var(--medio); }
.ps-panel .ps-cab-contacto a{ color:var(--tinta); text-decoration:none; min-height:32px; display:inline-flex; align-items:center; }
.ps-panel .ps-cab-contacto a:hover{ text-decoration:underline; text-underline-offset:3px; }
@container (min-width: 880px){
  .ps-panel .ps-cab-contacto{ display:none; }
}

/* ------------------------------------------------------------ cuerpo en dos columnas: lo de la pestana + el cliente */
.ps-panel .ps-cuerpo{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--e-6); margin-top:0; align-items:start; }
/* Las pestanas traen su propio aire de abajo; sin pestanas (un prospecto) el cuerpo se separa solo. */
.ps-panel #por-nav:empty + .ps-cuerpo{ margin-top:var(--e-5); }
@container (min-width: 880px){
  .ps-panel .ps-cuerpo{ grid-template-columns:minmax(0,1fr) 340px; }
}
.ps-panel .ps-princ{ min-width:0; }
.ps-panel .ps-lado{ min-width:0; display:flex; flex-direction:column; gap:var(--e-4); }
/* Los resumenes (Dinero y El dia) solo se ven en «Ahora»: porMontarNav pone data-por-tab. En «solo trabajo» (sin cliente) la columna no tiene nada mas, asi que en las otras pestanas se va. */
.ps-panel .ps-resumen{ display:none; }
.ps-panel[data-por-tab="ahora"] .ps-resumen{ display:flex; flex-direction:column; gap:var(--e-3); }
.ps-panel.ps-solo:not([data-por-tab="ahora"]) .ps-lado{ display:none; }
@container (min-width: 880px){
  .ps-panel.ps-solo:not([data-por-tab="ahora"]) .ps-cuerpo{ grid-template-columns:minmax(0,1fr); }
}

/* ------------------------------------------------------------ el panel en una pagina (P2 del plan PLAN-panel-una-pagina-2026-10, lienzos v2 y v4; detras de PANEL_UNA)
   Sin pestanas: «Ahora» a la izquierda; Dinero, El dia y Entrega son modulos de la columna, encima de la del cliente, y se abren en su lugar (la columna se ensancha).
   Las secciones de un modulo viven DENTRO de #por-trabajo (su refrescar las busca ahi: portal-simple.js, colocar): .ps-princ, #por-trabajo y su .ficha-secs no pintan caja
   (display:contents) y sus dos hijos, la izquierda y los modulos, caen en la misma rejilla que la columna del cliente. Asi las reglas `.ps-princ .fsec` siguen valiendo para las
   secciones de un modulo y no tocan las del cliente. El ancho que manda es el de la columna (container queries), nunca el de la ventana. */
.ps-panel.ps-una #por-nav{ display:none; }
.ps-panel.ps-una .ps-cuerpo{ margin-top:var(--e-5); }
.ps-panel.ps-una .ps-princ, .ps-panel.ps-una #por-trabajo.ps-una-trab, .ps-panel.ps-una #por-trabajo.ps-una-trab > .ficha-secs{ display:contents; }
.ps-panel.ps-una .ps-una-izq, .ps-panel.ps-una .ps-una-der{ min-width:0; }
.ps-panel.ps-una .ps-una-der{ display:flex; flex-direction:column; gap:var(--e-3); }
.ps-panel.ps-una .ps-lado .ps-resumen{ display:none; }
.ps-panel.ps-una.ps-solo .ps-lado{ display:none; }
@container (min-width: 880px){
  /* Dos filas a la derecha (los modulos y, debajo, el cliente) y la izquierda de punta a punta: la segunda fila (1fr) se queda con lo que sobra, asi que el cliente va pegado a los modulos. */
  .ps-panel.ps-una .ps-cuerpo{ grid-template-columns:minmax(0,1fr) 360px; grid-template-rows:auto 1fr; row-gap:var(--e-4); }
  .ps-panel.ps-una .ps-una-izq, .ps-panel.ps-una #por-trabajo:not(.ps-una-trab){ grid-column:1; grid-row:1 / span 2; }
  .ps-panel.ps-una .ps-una-der{ grid-column:2; grid-row:1; }
  .ps-panel.ps-una .ps-lado{ grid-column:2; grid-row:2; }
  /* Un modulo abierto ensancha la columna (lienzo v2: «la columna se ensancha»). Va con .ps-una-ancho para ganarle a la regla de «solo trabajo» fuera de «Ahora», de arriba. */
  .ps-panel.ps-una.ps-una-ancho .ps-cuerpo{ grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); }
}
@media (prefers-reduced-motion: no-preference){
  .ps-panel.ps-una .ps-cuerpo{ transition:grid-template-columns var(--d-hoja) var(--curva-entra); }
}

/* Un modulo: resumen (ninguno abierto), una linea (otro abierto) o abierto (sus secciones debajo y una X). Forma de pieza flotante (16 px), y abierto sin caja: sus secciones ya traen la suya. */
.ps-panel.ps-una .ps-mod{ display:flex; flex-direction:column; gap:var(--e-2); min-width:0; background:var(--piedra); border-radius:var(--r-flota); padding:var(--e-4) var(--e-5); }
.ps-panel.ps-una .ps-mod[hidden]{ display:none; }
.ps-panel.ps-una .ps-mod[data-forma="linea"]{ padding:var(--e-2) var(--e-5); }
.ps-panel.ps-una .ps-mod[data-forma="abierto"]{ background:transparent; padding:0; }
.ps-panel.ps-una .ps-mod:not([data-forma="abierto"]) > .ps-mod-c{ display:none; }
.ps-panel.ps-una .ps-mod-h{ min-width:0; }
.ps-panel.ps-una .ps-mod-fila{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); min-height:44px; color:var(--tinta); text-decoration:none; }
.ps-panel.ps-una a.ps-mod-fila:hover .ps-mod-t{ text-decoration:underline; text-underline-offset:3px; }
.ps-panel.ps-una .ps-mod-t{ margin:0; font-size:var(--t-campo); font-weight:600; color:var(--tinta); }
/* Abierto, su titulo es el del grupo: un escalon arriba de los titulos de sus secciones (que son --t-campo), para que no se lea como una seccion mas. */
.ps-panel.ps-una .ps-mod[data-forma="abierto"] .ps-mod-t{ font-size:var(--t-sub); }
.ps-panel.ps-una .ps-mod-a{ display:inline-flex; align-items:center; gap:6px; min-width:0; font-size:var(--t-meta); color:var(--medio); text-align:right; }
.ps-panel.ps-una .ps-mod-x{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--r-pildora); background:var(--piedra); color:var(--tinta); }
.ps-panel.ps-una .ps-mod-x:hover{ background:var(--piedra-on); }
.ps-panel.ps-una .ps-mod-cu .ps-res-fuerte:first-child{ margin-top:0; }

.ps-panel .ps-res, .ps-panel .ps-cli, .ps-panel .ps-sintrabajo{ background:var(--piedra); border-radius:var(--r-flota); padding:var(--e-4) var(--e-5); }
.ps-panel .ps-res-h{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--e-3); }
.ps-panel .ps-res-t, .ps-panel .ps-cli-n{ margin:0; font-size:var(--t-campo); font-weight:600; color:var(--tinta); }
.ps-panel .ps-res-meta, .ps-panel .ps-res-vacio, .ps-panel .ps-res-plan, .ps-panel .ps-card-d{ font-size:var(--t-meta); color:var(--medio); margin-top:var(--e-1); }
.ps-panel .ps-res-fuerte{ margin-top:var(--e-2); font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
.ps-panel .ps-dato{ display:flex; justify-content:space-between; gap:var(--e-3); padding:var(--e-1) 0; font-size:var(--t-texto); color:var(--tinta); font-variant-numeric:tabular-nums; }
.ps-panel .ps-dato > span:first-child{ color:var(--medio); }
.ps-panel .ps-dato-saldo > span{ color:var(--tinta) !important; font-weight:600; }
.ps-panel .ps-barra{ height:6px; border-radius:var(--r-pildora); background:var(--piedra-on); margin:6px 0; }
.ps-panel .ps-barra > div{ height:6px; border-radius:var(--r-pildora); background:var(--tinta); }
.ps-panel .enl{ padding:0; border:0; background:none; color:var(--tinta); font:inherit; font-size:var(--t-meta); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

/* La columna del cliente: las secciones de siempre (.fsec) montadas dentro de UNA tarjeta, sin su propia caja. */
.ps-panel .ps-cli .ficha-secs{ gap:0; }
.ps-panel .ps-cli .fsec{ background:transparent; border:0; box-shadow:none; border-radius:0; }
.ps-panel .ps-cli .fsec-h{ padding:var(--e-4) 0 var(--e-1); }
.ps-panel .ps-cli .fsec-body{ padding:var(--e-1) 0 var(--e-2); }
.ps-panel .ps-cli .ce-grid{ grid-template-columns:minmax(0,1fr); }
/* El contacto como renglones (el dato a la derecha), sin el titulo de la seccion: la tarjeta ya dice de quien es. */
.ps-panel .ps-cli [data-sec="contacto"] > .fsec-h{ display:none; }
.ps-panel .ps-cli [data-sec="contacto"] .ce{ flex-direction:row; align-items:baseline; justify-content:space-between; gap:var(--e-3); min-height:0; padding-top:var(--e-1); padding-bottom:var(--e-1); }
.ps-panel .ps-cli [data-sec="contacto"] .ce .ce-v{ text-align:right; }
.ps-panel .ps-cli [data-sec="contacto"] .ce .flabel{ flex:none; }
.ps-panel .ps-cli [data-sec="contacto"] .ce-grid-1 .ce{ flex-direction:column; align-items:flex-start; }
.ps-panel .ps-cli [data-sec="contacto"] .ce-grid-1 .ce .ce-v{ text-align:left; }
.ps-panel .ps-cli-n{ margin-bottom:var(--e-1); }
/* L2b del motor de leads: un prospecto con «Su boda» y «De donde vino» (data-ps-lead) son TRES bloques con su titulo, como el lienzo; la columna no lleva el
   «Contacto» de arriba (diria «Contacto» encima de «Su boda»). Sus campos van como renglones, igual que el contacto. */
.ps-panel .ps-cli[data-ps-lead] [data-sec="contacto"] > .fsec-h{ display:flex; }
.ps-panel .ps-cli[data-ps-lead] .fsec-t{ font-size:var(--t-campo); font-weight:600; color:var(--tinta); }
.ps-panel .ps-cli[data-ps-lead] .fsec:first-child > .fsec-h{ padding-top:0; }
.ps-panel .ps-cli [data-sec="su_boda"] .ce, .ps-panel .ps-cli [data-sec="de_donde"] .ce{ flex-direction:row; align-items:baseline; justify-content:space-between; gap:var(--e-3); min-height:0; padding-top:var(--e-1); padding-bottom:var(--e-1); }
.ps-panel .ps-cli [data-sec="su_boda"] .ce .ce-v, .ps-panel .ps-cli [data-sec="de_donde"] .ce .ce-v{ text-align:right; }
.ps-panel .ps-cli [data-sec="su_boda"] .ce .flabel, .ps-panel .ps-cli [data-sec="de_donde"] .ce .flabel{ flex:none; }
.ps-panel .ps-pleg{ margin-top:var(--e-2); }
.ps-panel .ps-pleg > summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); min-height:44px; padding:var(--e-2) 0; box-shadow:inset 0 1px 0 var(--linea); font-size:var(--t-texto); color:var(--tinta); cursor:pointer; list-style:none; }
.ps-panel .ps-pleg > summary::-webkit-details-marker{ display:none; }
.ps-panel .ps-pleg > summary svg{ flex:none; color:var(--medio); }
.ps-panel .ps-pleg[open] > summary svg{ transform:rotate(180deg); }
.ps-panel .ps-pleg-c{ padding-bottom:var(--e-2); }
.ps-panel .ps-pleg-c:empty{ display:none; }

/* Un prospecto: la tarjeta que dice que todavia no tiene trabajo. */
.ps-panel .ps-sintrabajo{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--e-3); margin-bottom:var(--e-4); }
.ps-panel .ps-card-t{ font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
.ps-panel #ps-prosp-conv, .ps-panel #ps-prosp-pend{ min-width:0; }

/* «Sus trabajos» (solo con 2 o mas): sobre las pestanas, sin la caja de antes. */
.ps-panel .ps-trabajos{ margin-top:var(--e-3); }

/* El «⋯»: dos grupos (el del trabajo, el del cliente) y el estado, separados por una raya fina; lo destructivo, en el color de lo urgente. */
.pendw-pop .ps-menu-sep{ height:1px; margin:var(--e-1) var(--e-2); background:var(--linea); }
.pendw-pop .ps-peligro{ color:var(--urge); }

/* En esta pantalla el UNICO boton relleno es el del siguiente paso (P6; en un prospecto, «Contestar»): los botones de accion principal de lo que vive dentro de la columna y de la lista de control
   de los documentos quedan tonales. */
.ps-panel .pp-btn-primario, .ps-panel .btn-wa, .ps-panel .btn-p:not([data-ps-escribir]):not([data-ps-pagar]){ background:var(--piedra-on); color:var(--tinta); }

/* ------------------------------------------------------------ F2: la pestana «Ahora» con el motor de la boda (public/portal-ahora.js) */
/* «Desde tu ultima visita»: una linea bajo la cabecera, solo si hay algo nuevo. */
.ps-panel .ps-cab-ult{ flex:0 0 100%; margin-top:var(--e-1); font-size:var(--t-texto); color:var(--medio); }
.ps-panel .ps-cab-ult strong{ color:var(--tinta); font-weight:600; }

/* El siguiente paso es una tarjeta (flota: 16 px) y no lleva titulo de seccion visible: el titulo queda para lectores de pantalla. Es el UNICO boton relleno de la pantalla. */
.ps-panel .ps-sec-sig, .ps-panel .ps-sec-camino, .ps-panel .ps-sec-proximas{ background:transparent; border:0; box-shadow:none; border-radius:0; padding:0; margin:0 0 var(--e-5); }
.ps-panel .ps-sec-sig > .fsec-h{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; padding:0; }
.ps-panel .ps-sec-sig > .fsec-body{ padding:0; }
.ps-panel .ps-sig{ background:var(--piedra); border-radius:var(--r-flota); padding:var(--e-4) var(--e-5); }
.ps-panel .ps-sig-eye{ display:flex; align-items:center; gap:6px; font-size:var(--t-meta); font-weight:600; color:var(--tinta); }
.ps-panel .ps-sig-eye i{ display:inline-block; width:7px; height:7px; border-radius:var(--r-pildora); background:var(--tinta); }
.ps-panel .ps-sig[data-ps-turno="ellos"] .ps-sig-eye i{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--tinta); }
.ps-panel .ps-sig-fila{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--e-3) var(--e-4); margin-top:var(--e-2); }
.ps-panel .ps-sig[data-ps-turno="nadie"] .ps-sig-fila{ margin-top:0; }
.ps-panel .ps-sig-txt{ flex:1 1 240px; min-width:0; }
.ps-panel .ps-sig-t{ display:flex; align-items:center; gap:var(--e-2); margin:0; font-size:var(--t-titulo); font-weight:500; letter-spacing:-.01em; line-height:1.2; color:var(--tinta); overflow-wrap:anywhere; }
.ps-panel .ps-sig-ok{ display:inline-flex; flex:none; color:var(--medio); }
.ps-panel .ps-sig-d{ margin:var(--e-1) 0 0; font-size:var(--t-texto); color:var(--medio); }
.ps-panel .ps-sig-btn{ flex:none; min-height:44px; background:var(--boton); color:var(--boton-t); }
.ps-panel .ps-sig .btn.btn-p.ps-sig-btn{ background:var(--boton); color:var(--boton-t); }
.ps-panel .ps-an{ margin-top:var(--e-3); padding-top:var(--e-2); box-shadow:inset 0 1px 0 var(--linea); }
.ps-panel .ps-an-t{ padding:var(--e-1) 0; border:0; background:none; color:var(--medio); font:inherit; font-size:var(--t-texto); cursor:pointer; }
.ps-panel .ps-an-ops{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-2); }
.ps-panel .ps-an-ops[hidden]{ display:none; }
/* El borrador de Xarpie (solo cuando el paso lo trae): contenido, no flota (4 px). Se REVISA aqui; nunca se manda desde aqui. */
.ps-panel .ps-bor{ margin-top:var(--e-3); padding:var(--e-3) var(--e-4); border-radius:var(--r); background:var(--piedra-on); }
.ps-panel .ps-bor-t{ display:flex; align-items:center; gap:6px; font-size:var(--t-meta); font-weight:600; color:var(--tinta); }
.ps-panel .ps-bor-t::before{ content:""; width:7px; height:7px; border-radius:var(--r-pildora); background:var(--marca-punto); }
.ps-panel .ps-bor-txt{ margin:var(--e-1) 0 0; font-size:var(--t-texto); color:var(--tinta); overflow-wrap:anywhere; }
.ps-panel .ps-bor-pie{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--e-1) var(--e-3); margin-top:var(--e-2); font-size:var(--t-meta); color:var(--medio); }
/* «Ahora no» ya dicho: una fila callada, con lo que se decidio y como volver. */
.ps-panel .ps-sig-pos{ background:transparent; box-shadow:inset 0 0 0 1px var(--linea); }
.ps-panel .ps-pos-t{ margin:0; font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
.ps-panel .ps-pos-d{ margin:var(--e-1) 0 var(--e-2); font-size:var(--t-meta); color:var(--medio); }

/* La pregunta de un toque: UNA, debajo de la tarjeta. */
.ps-panel .ps-preg{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--e-3) var(--e-4); margin-top:var(--e-3); padding:var(--e-3) var(--e-4); border-radius:var(--r-flota); background:var(--piedra); }
.ps-panel .ps-preg-q{ display:flex; align-items:center; gap:var(--e-2); flex:1 1 240px; min-width:0; font-size:var(--t-texto); color:var(--tinta); }
.ps-panel .ps-preg-q svg{ flex:none; color:var(--medio); }
.ps-panel .ps-preg-eye{ flex:none; font-size:var(--t-meta); font-weight:600; }
.ps-panel .ps-preg-ops{ display:flex; flex-wrap:wrap; gap:var(--e-2); }
.ps-panel .ps-preg-ops .btn:not(.btn-gh){ background:var(--piedra-on); color:var(--tinta); }
/* Tren 2 y 3 del portal como la carta (P2): la opcion que avanza de la pregunta que ES lo siguiente va rellena, igual que el boton del paso (.ps-sig-btn).
   Sin esto la regla de arriba y la de los botones tonales del panel la dejaban gris: el tren 2 salio sin verse (5-6 nov). */
.ps-panel .ps-preg .btn.btn-p.ps-preg-prim{ background:var(--boton); color:var(--boton-t); }

/* El camino a la boda: en la columna angosta, una lista vertical con su hilo; con ancho de sobra (1440 sin chat), una linea de hitos. Sin rojo: lo que urge se dice con palabras. */
.ps-panel .ps-sec-camino > .fsec-h, .ps-panel .ps-sec-proximas > .fsec-h{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--e-3); padding:0 0 var(--e-3); }
.ps-panel .ps-sec-camino .fsec-t, .ps-panel .ps-sec-proximas .fsec-t{ font-size:var(--t-campo); font-weight:600; color:var(--tinta); margin:0; }
.ps-panel .ps-cam-todo{ margin-left:auto; }
.ps-panel .ps-camino{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.ps-panel .ps-hito{ position:relative; padding:0 0 var(--e-3) 28px; min-width:0; }
.ps-panel .ps-hito:last-child{ padding-bottom:0; }
.ps-panel .ps-hito::before{ content:""; position:absolute; left:5px; top:14px; bottom:-2px; width:1.5px; background:var(--linea); }
.ps-panel .ps-hito:last-child::before{ display:none; }
.ps-panel .ps-punto{ position:absolute; left:0; top:3px; width:12px; height:12px; border-radius:var(--r-pildora); box-shadow:inset 0 0 0 1.5px var(--punto); background:var(--pag); }
.ps-panel .ps-hito[data-ps-estado="listo"] .ps-punto{ background:var(--tinta); box-shadow:none; }
.ps-panel .ps-hito[data-ps-estado="ya_toca"] .ps-punto{ box-shadow:inset 0 0 0 3.5px var(--tinta); background:var(--pag); }
.ps-panel .ps-hito-b{ display:block; width:100%; padding:0; border:0; background:none; font:inherit; text-align:left; color:var(--tinta); cursor:default; }
.ps-panel button.ps-hito-b{ cursor:pointer; }
.ps-panel .ps-hito-n{ display:block; font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
.ps-panel .ps-hito-d{ display:block; margin-top:2px; font-size:var(--t-meta); color:var(--medio); }
.ps-panel .ps-hito[data-ps-estado="ya_toca"] .ps-hito-d{ color:var(--tinta); font-weight:600; }
.ps-panel .ps-cam-despues{ margin:var(--e-3) 0 0; font-size:var(--t-meta); color:var(--medio); }
/* Camino editable F1 (bandera CAMINO_EDITAR, public/camino-hoja.js): todo paso es un boton que abre su hoja. La flecha y el fondo al pasar dicen que se toca;
   el fondo es contenido (4 px), nunca una caja fija. En la linea horizontal (columna ancha) la flecha sobra: el paso entero ya es el boton. */
.ps-panel .ps-hito-hoja .ps-hito-b{ position:relative; display:flex; align-items:flex-start; gap:0 var(--e-2); flex-wrap:wrap; margin:calc(var(--e-1) * -1) calc(var(--e-2) * -1); padding:var(--e-1) var(--e-6) var(--e-1) var(--e-2); width:calc(100% + var(--e-4)); border-radius:var(--r); cursor:pointer; }
.ps-panel .ps-hito-hoja .ps-hito-n, .ps-panel .ps-hito-hoja .ps-hito-d{ flex:1 0 100%; }
.ps-panel .ps-hito-hoja .ps-punto{ left:-20px; top:7px; }
.ps-panel .ps-hito-fl{ position:absolute; right:var(--e-2); top:50%; transform:translateY(-50%) rotate(-90deg); display:flex; color:var(--medio); }
@media (hover:hover){ .ps-panel .ps-hito-hoja .ps-hito-b:hover, .ps-panel .ps-cc-fb:hover{ background:var(--tinte-toque); } }
@container (min-width: 1180px){ .ps-panel .ps-hito-fl{ display:none; } .ps-panel .ps-hito-hoja .ps-punto{ top:-16px; left:var(--e-2); } }
.ps-panel .ps-cc-hoja .ps-cc-f{ display:block; padding:0; }
.ps-panel .ps-cc-fb{ display:grid; grid-template-columns:minmax(120px,170px) minmax(0,1fr) auto 16px; align-items:center; gap:var(--e-2) var(--e-3); width:100%; min-height:44px; padding:var(--e-2) var(--e-1); border:0; border-radius:var(--r); background:none; font:inherit; font-size:var(--t-texto); text-align:left; color:var(--tinta); cursor:pointer; }
.ps-panel .ps-cc-fl{ display:flex; color:var(--medio); transform:rotate(-90deg); }
.ps-panel .ps-cc-fuera .ps-cc-n, .ps-panel .ps-cc-fuera .ps-cc-d{ color:var(--apagado); text-decoration:line-through; text-decoration-thickness:1px; }
.ps-panel .ps-cc-poner{ display:block; margin:0 0 var(--e-2) auto; min-height:32px; padding:0 var(--e-1); }
@container (max-width: 560px){ .ps-panel .ps-cc-fb{ grid-template-columns:minmax(0,1fr) auto 16px; } .ps-panel .ps-cc-fb .ps-cc-d{ grid-column:1 / -1; grid-row:2; font-weight:400; color:var(--medio); } .ps-panel .ps-cc-fb .ps-cc-d:empty{ display:none; } }
/* El camino UNICO de «Ahora» (camino editable F2m, D10-D13): tres grupos plegables, filas sin cajas ni rayas, el boton del paso a la vista solo cuando ya toca
   (delineado: el relleno es del siguiente paso de arriba). La fila entera es un boton que abre la hoja; el boton del paso va ENCIMA, en su propia columna
   (dos botones hermanos, nunca uno dentro de otro). Angosto (telefono o la columna con el chat): el boton baja a su linea. */
.ps-panel .ps-cu-cuenta{ margin:0 0 var(--e-2); font-size:var(--t-meta); color:var(--medio); }
.ps-panel .ps-cu-g + .ps-cu-g{ margin-top:var(--e-2); }
.ps-panel .ps-cu-gh{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); width:100%; min-height:40px; padding:0 var(--e-1); border:0; border-radius:var(--r); background:none; font:inherit; font-size:var(--t-eti); letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--medio); text-align:left; cursor:pointer; }
.ps-panel .ps-cu-g-listo .ps-cu-gh{ text-transform:none; letter-spacing:0; font-size:var(--t-texto); font-weight:400; }
.ps-panel .ps-cu-gfl{ display:flex; transition:transform var(--d-toque) var(--curva-cambia); }
.ps-panel .ps-cu-gh[aria-expanded="true"] .ps-cu-gfl{ transform:rotate(180deg); }
.ps-panel .ps-cu-l{ list-style:none; margin:0; padding:0; }
.ps-panel .ps-cu-l[hidden]{ display:none; }
.ps-panel .ps-cu-f{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto 36px; align-items:center; }
.ps-panel .ps-cu-b{ grid-column:1 / -1; grid-row:1; display:grid; grid-template-columns:subgrid; align-items:center; width:100%; min-height:52px; padding:var(--e-1) var(--e-2); border:0; border-radius:var(--r); background:none; font:inherit; text-align:left; color:var(--tinta); cursor:pointer; }
@media (hover:hover){ .ps-panel .ps-cu-b:hover{ background:var(--tinte-toque); } }
.ps-panel .ps-cu-izq{ grid-column:1; display:flex; align-items:center; gap:var(--e-3); min-width:0; }
.ps-panel .ps-cu-b .ps-punto{ position:static; flex:none; }
.ps-panel .ps-cu-f[data-ps-estado="listo"] .ps-punto{ background:var(--tinta); box-shadow:none; }
.ps-panel .ps-cu-f[data-ps-estado="ya_toca"] .ps-punto{ box-shadow:inset 0 0 0 3.5px var(--tinta); background:var(--pag); }
.ps-panel .ps-cu-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ps-panel .ps-cu-n{ font-size:var(--t-texto); font-weight:500; }
.ps-panel .ps-cu-f[data-ps-estado="listo"] .ps-cu-n{ color:var(--medio); font-weight:400; }
.ps-panel .ps-cu-d{ font-size:var(--t-meta); color:var(--medio); }
.ps-panel .ps-cu-f[data-ps-estado="ya_toca"] .ps-cu-d{ color:var(--tinta); font-weight:600; }
.ps-panel .ps-cu-f[data-ps-fuera] .ps-cu-n, .ps-panel .ps-cu-f[data-ps-fuera] .ps-cu-d{ color:var(--apagado); text-decoration:line-through; text-decoration-thickness:1px; font-weight:400; }
.ps-panel .ps-cu-fl{ grid-column:3; justify-self:center; display:flex; color:var(--medio); transform:rotate(-90deg); }
.ps-panel .ps-cu-acc{ grid-column:2; grid-row:1; position:relative; z-index:1; margin-left:var(--e-3); min-height:36px; padding:0 var(--e-4); border:0; border-radius:var(--r-pildora); background:var(--piedra); box-shadow:inset 0 0 0 1px var(--punto); font:inherit; font-size:var(--t-meta); font-weight:500; color:var(--tinta); white-space:nowrap; cursor:pointer; }
.ps-panel .ps-cu-poner{ grid-column:2; grid-row:1; position:relative; z-index:1; min-height:32px; }
.ps-panel .ps-cu-pie{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); margin-top:var(--e-3); padding:0 var(--e-2); font-size:var(--t-meta); color:var(--medio); }
@container (max-width: 560px){
  .ps-panel .ps-cu-acc, .ps-panel .ps-cu-poner{ grid-column:1 / -1; grid-row:2; justify-self:start; margin:0 0 var(--e-2) 36px; }
}
@media (prefers-reduced-motion: reduce){ .ps-panel .ps-cu-gfl{ transition:none; } }
/* La hoja de un paso: vive en el modal, fuera de .ps-panel. */
.ch-cuerpo{ display:flex; flex-direction:column; gap:var(--e-4); padding-bottom:var(--e-2); }
.ch-campo{ display:flex; flex-direction:column; gap:var(--e-1); }
.ch-eti{ font-size:var(--t-meta); color:var(--medio); }
.ch-val{ font-size:var(--t-campo); color:var(--tinta); }
.ch-in{ max-width:220px; }
.ch-ayuda{ margin:0; font-size:var(--t-meta); line-height:1.45; color:var(--medio); }
.ch-enl{ align-self:flex-start; padding:0; border:0; background:none; color:var(--tinta); font:inherit; font-size:var(--t-texto); text-decoration:underline; text-underline-offset:3px; cursor:pointer; min-height:32px; }
.ch-confirma{ display:flex; flex-direction:column; gap:var(--e-3); padding:var(--e-4); border-radius:var(--r); background:var(--piedra-on); }
.ch-confirma[hidden]{ display:none; }
.ch-ct{ margin:0; font-size:var(--t-campo); font-weight:500; color:var(--tinta); }
.ch-cl{ margin:0; padding-left:18px; font-size:var(--t-texto); line-height:1.5; color:var(--tinta); }
.ch-cb{ display:flex; gap:var(--e-2); justify-content:flex-end; flex-wrap:wrap; }
.ch-hoja .pz-hoja-pie > .pz-b-s{ margin-right:auto; }
/* Las zonas que actuan (camino editable F2b): equipo, cuestionario y cronograma dentro de la hoja. Filas sin cajas; 4 px = contenido; pildora = se toca. */
.ch-zona{ display:flex; flex-direction:column; gap:var(--e-2); }
.ch-lugar{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); min-height:44px; font-size:var(--t-texto); }
.ch-lugar-n{ color:var(--medio); }
.ch-sel{ width:auto; min-width:200px; max-width:60%; }
.ch-sel-falta{ box-shadow:inset 0 0 0 1px var(--tinta); }
.ch-txt{ margin:0; font-size:var(--t-texto); line-height:1.5; color:var(--tinta); }
.ch-doc{ display:flex; flex-direction:column; gap:var(--e-1); padding:var(--e-4); border-radius:var(--r); background:var(--piedra-on); }
.ch-doc strong{ font-size:var(--t-campo); font-weight:500; color:var(--tinta); }
.ch-doc span{ font-size:var(--t-texto); color:var(--medio); }
.ch-acc{ display:flex; flex-wrap:wrap; gap:var(--e-2); }
.ch-gh{ display:inline-flex; align-items:center; min-height:40px; padding:0 var(--e-4); border:0; border-radius:var(--r-pildora); background:none; box-shadow:inset 0 0 0 1px var(--punto); font:inherit; font-size:var(--t-texto); font-weight:500; color:var(--tinta); text-decoration:none; cursor:pointer; }
.ch-ops{ display:flex; flex-direction:column; gap:var(--e-1); }
.ch-op{ display:flex; align-items:center; gap:var(--e-3); min-height:44px; padding:0 var(--e-3); border-radius:var(--r); font-size:var(--t-texto); cursor:pointer; }
.ch-op:has(input:checked){ background:var(--piedra-on); }
.ch-op input{ accent-color:var(--tinta); margin:0; }
.ch-op small{ margin-left:auto; font-size:var(--t-meta); color:var(--medio); }
.ch-zona .paybox{ margin-top:0 !important; }
.ch-enlace{ display:flex; gap:var(--e-2); align-items:center; }
.ch-enlace .inp{ flex:1; min-width:0; }
.ch-hoja .pz-hoja-pie > [hidden]{ display:none; }
@container (min-width: 1180px){
  .ps-panel .ps-camino{ flex-direction:row; gap:var(--e-4); }
  .ps-panel .ps-hito{ flex:1 1 0; padding:22px 0 0; }
  .ps-panel .ps-hito::before{ left:12px; right:calc(var(--e-4) * -1); top:8px; bottom:auto; width:auto; height:1.5px; }
  .ps-panel .ps-punto{ top:2px; }
}

/* Las proximas tareas. */
.ps-panel .ps-tarea{ padding:var(--e-2) 0; }
.ps-panel .ps-t-vacio{ margin:0; font-size:var(--t-texto); color:var(--medio); }
.ps-panel .ps-t-todas{ display:inline-block; margin-top:var(--e-2); }

/* Las secciones plegables de «Ahora»: la cabecera es el boton. Cerradas siguen en el DOM (Xarpie las senala y se abren solas). */
.ps-panel .ps-plegable{ margin:0; border-radius:0; background:transparent; border:0; box-shadow:inset 0 1px 0 var(--linea); padding:0; }
.ps-panel .ps-plegable > .fsec-h{ display:flex; align-items:center; gap:var(--e-3); min-height:48px; padding:var(--e-2) 0; cursor:pointer; }
.ps-panel .ps-plegable .fsec-t{ font-size:var(--t-texto); font-weight:400; color:var(--tinta); margin:0; }
.ps-panel .ps-plegable > .fsec-h .w-quick{ margin-left:auto; }
.ps-panel .ps-plegable > .fsec-h .ps-chev{ display:inline-flex; margin-left:auto; color:var(--medio); }
.ps-panel .ps-plegable > .fsec-h .w-quick + .ps-chev{ margin-left:0; }
.ps-panel .ps-plegable:not(.ps-cerrada) > .fsec-h .ps-chev svg{ transform:rotate(180deg); }
/* Lo de adentro se va TODO menos la cabecera: la lista de control de los documentos (.pp-control) cuelga de la seccion, no de su cuerpo. */
.ps-panel .ps-plegable.ps-cerrada > :not(.fsec-h){ display:none; }

/* «Xarpie en contexto»: 2 o 3 chips bajo las notas del cliente. */
.ps-panel .ps-xctx:empty{ display:none; }
.ps-panel .ps-xctx-in{ padding:var(--e-3) 0 var(--e-1); }
.ps-panel .ps-xctx-t{ display:flex; align-items:center; gap:6px; font-size:var(--t-meta); font-weight:600; color:var(--tinta); }
.ps-panel .ps-xctx-t::before{ content:""; width:7px; height:7px; border-radius:var(--r-pildora); background:var(--marca-punto); }
.ps-panel .ps-xctx-chips{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-2); }
.ps-panel .ps-chip{ box-shadow:inset 0 0 0 1px var(--linea); }
.ps-panel .ps-preg-grande{ margin-top:0; padding:var(--e-4) var(--e-5); }
.ps-panel .ps-preg-grande .ps-preg-q{ font-size:var(--t-sub); font-weight:500; }
/* La pastilla «Hilo» (public/hilos.js) cuelga de la fila de la linea: sin contorno parecia texto suelto. */
.ps-panel .ps-cab-linea .hl-pastilla{ min-height:26px; height:26px; padding:0 11px; font-size:var(--t-meta); box-shadow:inset 0 0 0 1px var(--linea); }

/* ------------------------------------------------------------ F3: El dia, Dinero y Entrega (public/portal-dia.js) y la columna completa */
/* Los titulos de las secciones del cuerpo: el titulo del tablero (15 px, firme), no la etiqueta apagada de siempre. */
.ps-panel .ps-princ .fsec:not(.ps-plegable):not(.ps-sec-sig):not(.ps-sec-crono) > .fsec-h{ display:flex; align-items:baseline; gap:var(--e-3); padding:var(--e-5) 0 var(--e-1); }
.ps-panel .ps-princ .fsec:not(.ps-plegable):not(.ps-sec-sig) > .fsec-h .fsec-t{ font-size:var(--t-campo); font-weight:600; color:var(--tinta); margin:0; }
.ps-panel .ps-princ .fsec > .fsec-h .w-count{ margin-left:auto; font-size:var(--t-meta); font-weight:400; color:var(--medio); }
.ps-panel .ps-princ .fsec > .fsec-h .w-count:empty{ display:none; }
.ps-panel .ps-princ .fsec-body{ padding:var(--e-1) 0 var(--e-2); }
.ps-panel .ps-princ .fsec-pista{ display:none; }
.ps-panel .ps-princ .fsec[hidden]{ display:none; }

/* Los datos como renglones: el rotulo a la izquierda, el dato, el lapiz; una raya fina entre uno y otro. Son los MISMOS campos editables (campoEditable), solo vestidos distinto. */
.ps-panel .ps-filas, .ps-panel [data-sec="costos"] .ce-grid{ display:flex; flex-direction:column; gap:0; }
.ps-panel .ps-filas > *, .ps-panel [data-sec="costos"] .ce-grid > *{ box-shadow:inset 0 1px 0 var(--linea); }
.ps-panel .ps-filas > :first-child, .ps-panel [data-sec="costos"] .ce-grid > :first-child{ box-shadow:none; }
.ps-panel .ps-filas .ce, .ps-panel [data-sec="costos"] .ce{ flex-direction:row; align-items:center; gap:var(--e-3); width:100%; min-height:44px; padding:var(--e-2) 0; margin:0; box-sizing:border-box; border-radius:0; box-shadow:none; }
.ps-panel .ps-filas .ce .flabel, .ps-panel [data-sec="costos"] .ce .flabel{ flex:0 0 150px; margin:0; color:var(--medio); }
.ps-panel .ps-filas .ce .ce-v, .ps-panel [data-sec="costos"] .ce .ce-v{ flex:1 1 auto; min-width:0; font-weight:500; color:var(--tinta); }
.ps-panel .ps-filas .ce .ce-v.ce-vacio{ font-weight:400; color:var(--medio); }
.ps-panel .ps-filas .ce .ce-lapiz, .ps-panel [data-sec="costos"] .ce .ce-lapiz{ position:static; flex:none; opacity:.55; }
.ps-panel .ps-filas .ce-editando{ flex-wrap:wrap; }
.ps-panel .ps-filas .fb-eq{ padding:0; }
.ps-panel .ps-filas .fb-eq .fb-eq-nota{ margin:0 0 var(--e-2) calc(150px + var(--e-3)); }
.ps-panel .ps-filas .fb-eq .ce-pend .ce-vacio{ color:var(--tinta); font-weight:500; font-style:normal; }
.ps-panel .ps-mas-datos .ce-grid{ grid-template-columns:minmax(0,1fr); gap:0; }
.ps-panel .ps-mas-datos .ce-grid > *{ box-shadow:inset 0 1px 0 var(--linea); }
.ps-panel .ps-mas-datos .ce{ flex-direction:row; align-items:center; gap:var(--e-3); width:100%; min-height:44px; padding:var(--e-2) 0; margin:0; box-sizing:border-box; border-radius:0; }
.ps-panel .ps-mas-datos .ce .flabel{ flex:0 0 150px; margin:0; color:var(--medio); }
.ps-panel .ps-mas-datos .ce .ce-v{ flex:1 1 auto; font-weight:500; }
.ps-panel .ps-mas-datos .ce .ce-lapiz{ position:static; opacity:.55; }
/* Plegados dentro del cuerpo (Incluye, Mas datos, los formularios de Pagos): la fila es el boton. */
.ps-panel .ps-princ .ps-pleg{ margin-top:0; }
.ps-panel .ps-incluye > summary{ justify-content:flex-start; }
.ps-panel .ps-incluye .ps-inc-t{ flex:0 0 150px; color:var(--medio); }
.ps-panel .ps-incluye .ps-inc-on{ flex:1 1 auto; min-width:0; font-weight:500; color:var(--tinta); overflow-wrap:anywhere; }
.ps-panel .ps-incluye > summary svg{ margin-left:auto; }
.ps-panel .ps-princ .ps-pleg .fb-incluye-chips{ margin-top:var(--e-2); }
.ps-panel .ps-princ .fb-incluye{ margin-top:0; }
@container (max-width: 560px){
  .ps-panel .ps-filas .ce .flabel, .ps-panel .ps-mas-datos .ce .flabel, .ps-panel .ps-incluye .ps-inc-t{ flex-basis:104px; }
  .ps-panel .ps-filas .fb-eq .fb-eq-nota{ margin-left:calc(104px + var(--e-3)); }
}

/* El cronograma: la tarjeta lleva su propio rotulo («Cronograma del dia»), asi que el titulo de la seccion sobra (queda para lectores de pantalla). */
.ps-panel .ps-princ .fsec.ps-sec-crono > .fsec-h{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; padding:0; }
.ps-panel .ps-princ .fsec.ps-sec-crono{ padding-top:var(--e-5); }
.ps-panel .ps-princ .fsec[data-sec="dia"] .paybox, .ps-panel .ps-princ .fsec[data-sec="dia"] .crono-card{ background:var(--piedra); border-radius:var(--r-flota); padding:var(--e-4) var(--e-5); }

/* Las tareas: todas, sin rojo. Las que ya pasaron y son automaticas se juntan en una linea. */
.ps-panel .ps-tareas{ display:flex; flex-direction:column; }
.ps-panel .ps-tareas .ps-tarea{ padding:var(--e-2) 0; }
.ps-panel .ps-t-mas, .ps-panel .ps-t-auto, .ps-panel .ps-t-hechas{ align-self:flex-start; margin-top:var(--e-2); color:var(--medio); text-decoration:none; }
.ps-panel .ps-t-mas:hover, .ps-panel .ps-t-auto:hover, .ps-panel .ps-t-hechas:hover{ color:var(--tinta); }
.ps-panel .ps-t-resto[hidden], .ps-panel .ps-t-autolista[hidden], .ps-panel .ps-t-hechaslista[hidden], .ps-panel .ps-t-add[hidden], .ps-panel .ps-t-mas[hidden]{ display:none; }
.ps-panel .ps-t-acc{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2) var(--e-4); margin-top:var(--e-3); }
.ps-panel .ps-callado{ color:var(--medio); text-decoration:none; }
.ps-panel .ps-t-add{ display:flex; gap:var(--e-2); margin-top:var(--e-2); }
.ps-panel .ps-t-add .inp{ flex:1 1 auto; min-width:0; }
.ps-panel .ps-tareas .evtl-auto{ color:var(--medio); }

/* El camino completo: una fila por hito. En una columna angosta el detalle baja de renglon. */
.ps-panel .ps-cc-sub{ margin:0 0 var(--e-2); font-size:var(--t-meta); color:var(--medio); }
.ps-panel .ps-cc{ list-style:none; margin:0; padding:0; }
.ps-panel .ps-cc-f{ display:grid; grid-template-columns:minmax(120px,170px) minmax(0,1fr) auto; align-items:center; gap:var(--e-2) var(--e-3); min-height:44px; padding:var(--e-2) 0; box-shadow:inset 0 1px 0 var(--linea); font-size:var(--t-texto); }
.ps-panel .ps-cc-f:first-child{ box-shadow:none; }
.ps-panel .ps-cc-n{ color:var(--medio); }
.ps-panel .ps-cc-d{ min-width:0; font-weight:500; color:var(--tinta); }
.ps-panel .ps-cc-e{ justify-self:end; font-size:var(--t-meta); color:var(--medio); text-align:right; }
.ps-panel .ps-cc-f[data-ps-estado="ya_toca"] .ps-cc-e{ color:var(--tinta); font-weight:600; }
.ps-panel .ps-cc-b{ grid-column:2 / -1; justify-self:start; box-shadow:inset 0 0 0 1px var(--linea); }
@container (max-width: 560px){
  .ps-panel .ps-cc-f{ grid-template-columns:minmax(0,1fr) auto; }
  .ps-panel .ps-cc-d{ grid-column:1 / -1; grid-row:2; font-weight:400; color:var(--medio); }
  .ps-panel .ps-cc-d:empty{ display:none; }
  .ps-panel .ps-cc-b{ grid-column:1 / -1; }
}
.ps-panel .ps-sec-cc{ margin:0; }

/* Dinero: lo que falta por cobrar (la tarjeta de arriba). El titulo de la seccion queda para lectores de pantalla; el boton relleno es el UNICO de la pestana. */
.ps-panel .ps-sec-dinero > .fsec-h{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; padding:0; }
.ps-panel .ps-sec-dinero > .fsec-body{ padding:0; }
.ps-panel .ps-d-card{ background:var(--piedra); border-radius:var(--r-flota); padding:var(--e-5); }
.ps-panel .ps-d-fila{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--e-3) var(--e-4); }
.ps-panel .ps-d-txt{ flex:1 1 240px; min-width:0; }
.ps-panel .ps-d-eye{ font-size:var(--t-meta); font-weight:600; color:var(--medio); }
.ps-panel .ps-d-cifra{ margin-top:2px; font-size:var(--t-saludo); font-weight:500; letter-spacing:-.02em; line-height:1.15; color:var(--tinta); font-variant-numeric:tabular-nums; }
.ps-panel .ps-d-sub{ margin-top:var(--e-1); font-size:var(--t-texto); color:var(--medio); }
.ps-panel .ps-d-btn{ flex:none; min-height:44px; padding:0 var(--e-5); background:var(--boton); color:var(--boton-t); }
.ps-panel .ps-d-card .btn.btn-p.ps-d-btn{ background:var(--boton); color:var(--boton-t); }
.ps-panel .ps-d-barra{ margin:var(--e-4) 0 0; height:8px; }
.ps-panel .ps-d-barra > div{ height:8px; }
.ps-panel .ps-d-plan{ margin-top:var(--e-3); font-size:var(--t-meta); color:var(--medio); }
.ps-panel .ps-d-campos{ margin-top:var(--e-3); }
.ps-panel .ps-sec-dinero .fb-nota{ margin:0 0 var(--e-2); }
.ps-panel .ps-sec-dinero .fb-nota a{ white-space:nowrap; }   /* «Ver contrato →» no deja la flecha sola en el renglon de abajo */
/* Pagos: la seccion de siempre, sin lo que repite la tarjeta de arriba (precio, pagado, barra, saldo); sus formularios van plegados. */
.ps-panel [data-sec="cobros"] .fsec-body > .payline, .ps-panel [data-sec="cobros"] .fsec-body > .paygauge, .ps-panel [data-sec="cobros"] .fsec-body > .paybig, .ps-panel [data-sec="cobros"] .fsec-body > .tsub{ display:none; }
/* El monto de un pago comparte renglon con el boton «×» (32 px de alto): sin centrar, el monto quedaba 7 px mas abajo que su concepto. */
.ps-panel [data-sec="cobros"] .payrow > .payline{ align-items:center; }
.ps-panel [data-sec="cobros"] .payrow > .payline > .money{ display:inline-flex; align-items:center; }
.ps-panel .ps-form > summary{ min-height:44px; }
.ps-panel .ps-form .ps-pleg-c{ padding:var(--e-2) 0 var(--e-3); }

/* Entrega: antes del evento, una tarjeta que explica y la lista de lo que se va a entregar. */
.ps-panel .ps-princ .fsec.ps-e-antes > .fsec-h{ display:none; }
.ps-panel .ps-e-card{ background:var(--piedra); border-radius:var(--r-flota); padding:var(--e-5) var(--e-5) var(--e-4); }
.ps-panel .ps-e-ico{ color:var(--medio); display:inline-flex; }
.ps-panel .ps-e-t{ margin-top:var(--e-2); font-size:var(--t-sub); font-weight:500; letter-spacing:-.01em; color:var(--tinta); }
.ps-panel .ps-e-card .btn-gh{ box-shadow:inset 0 0 0 1px var(--linea); }
.ps-panel .ps-e-d0{ margin:var(--e-1) 0 var(--e-4); max-width:520px; font-size:var(--t-texto); color:var(--medio); }
.ps-panel .ps-e-lista{ margin-top:var(--e-5); }
.ps-panel .ps-e-h{ font-size:var(--t-campo); font-weight:600; color:var(--tinta); margin-bottom:var(--e-1); }
.ps-panel .ps-e-fila{ display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:var(--e-3); padding:var(--e-3) 0; box-shadow:inset 0 1px 0 var(--linea); opacity:.8; }
.ps-panel .ps-e-fila:first-of-type{ box-shadow:none; }
.ps-panel .ps-e-ic{ width:18px; height:18px; border-radius:var(--r-pildora); box-shadow:inset 0 0 0 1.5px var(--punto); }
.ps-panel .ps-e-n{ font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
.ps-panel .ps-e-s{ margin-top:2px; font-size:var(--t-meta); color:var(--medio); }
.ps-panel .ps-e-d{ font-size:var(--t-meta); color:var(--medio); text-align:right; }

/* La columna: la conversacion como una burbuja y un enlace, y «Ultimo contacto». */
.ps-panel .ps-cli [data-sec="whatsapp"] > .fsec-h, .ps-panel .ps-cli [data-sec="ultimo_contacto"] > .fsec-h{ display:none; }
.ps-panel .ps-cli [data-sec="whatsapp"] > .fsec-body, .ps-panel .ps-cli [data-sec="ultimo_contacto"] > .fsec-body{ padding-top:var(--e-2); }
.ps-panel .ps-ultimo{ font-size:var(--t-meta); color:var(--medio); }
.ps-panel .ps-conv-cab{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-2); }
.ps-panel .ps-conv-t{ font-size:var(--t-meta); font-weight:600; color:var(--medio); }
.ps-panel .ps-conv-burbuja{ margin-top:var(--e-2); padding:var(--e-3) var(--e-4); border-radius:var(--r-flota) var(--r-flota) var(--r-flota) var(--r); background:var(--piedra-on); font-size:var(--t-texto); color:var(--tinta); overflow-wrap:anywhere; }
.ps-panel .ps-conv-burbuja.ps-conv-mia{ border-radius:var(--r-flota) var(--r-flota) var(--r) var(--r-flota); background:transparent; box-shadow:inset 0 0 0 1px var(--linea); }
.ps-panel .ps-conv-meta{ margin:var(--e-1) 0 var(--e-2); font-size:var(--t-meta); color:var(--medio); }
/* Las notas del cliente en la columna: los filtros (Todas, Restringidas, Del equipo) solo sirven cuando hay notas restringidas, y la linea de «Quien las lee» solo cuando ya hay alguna (el dueno llega a ella al escribir la primera). */
.ps-panel .ps-cli .fsec[data-sec="notas_cliente"]:not(:has(.ncl-r)) .ncl-filtros{ display:none; }
.ps-panel .ps-cli .fsec[data-sec="notas_cliente"]:not(:has(.ncl-r)) .ncl-lectores{ display:none; }
.ps-panel .ps-cli .fsec[data-sec="notas_cliente"] .ncl-barra{ justify-content:flex-end; }
/* Las notas del trabajo: el titulo de la seccion ya dice «Notas de ...»; el rotulo del campo sobra (queda en su aria-label). */
.ps-panel .ps-princ [data-sec="notas"] .ce .flabel{ display:none; }
/* Las casillas de cierre de Entrega (memorias respaldadas, resena recibida) y las de «Incluye»: contorno fino, para que se lean como casillas y no como texto. */
.ps-panel .ps-princ .fb-inc.pill-ghost{ box-shadow:inset 0 0 0 1px var(--linea); }

/* ------------------------------------------------------------ la repisa (public/repisa.js; plan PLAN-repisa-ficha-2026-10, lienzo del 29 oct): Galerias, Cine, Documentos y Su portal
   Desde el 30 oct solo el nombre, sin linea de estado (D4 del plan PLAN-panel-una-pagina-2026-10, lienzo v4): un renglon de texto, pildora mas baja.
   Cuelga de `.ficha-portal` y no de `.ps-panel`: la montan los dos paneles, el simple y el clasico de seis pestanas (F2).
   Pildoras porque se tocan. Grafito como el resto de la ficha: el matiz de un AREA (--area-*) es solo de los botones del Inicio (Cuarto Oscuro, regla 4). Un solo renglon que se desliza, NUNCA dos:
   con el chat abierto la columna mide ~420 px aunque la ventana mida 1280 (la trampa de .pz-tabs), y una repisa que reflowea mueve las pestanas debajo del cursor. */
.ficha-portal .ps-repisa{ margin:var(--e-5) 0 var(--e-4); }
.ficha-portal .ps-rp-fila{ display:flex; flex-wrap:nowrap; gap:10px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; }
.ficha-portal .ps-rp-fila::-webkit-scrollbar{ display:none; }
.ficha-portal .ps-rp{ display:inline-flex; align-items:center; gap:var(--e-3); flex:none; min-height:52px; padding:0 24px 0 6px; border:0; border-radius:var(--r-pildora);
  background:var(--piedra); box-shadow:inset 0 0 0 1px var(--linea); color:var(--tinta); font:inherit; text-align:left; cursor:pointer; scroll-snap-align:start;
  transition:background var(--d-toque) var(--curva-cambia); }
.ficha-portal .ps-rp:hover{ background:var(--piedra-on); }
/* El circulo del icono es el fondo de la pagina (un hueco): con --piedra-on desapareceria al pasar el raton, que pinta la pildora de ese mismo tono. */
.ficha-portal .ps-rp-ic{ flex:none; width:40px; height:40px; border-radius:var(--r-pildora); display:flex; align-items:center; justify-content:center; background:var(--pag); color:var(--tinta); }
.ficha-portal .ps-rp-t{ font-size:var(--t-texto); font-weight:500; line-height:1.25; white-space:nowrap; }
@container (max-width: 640px){
  .ficha-portal .ps-repisa{ margin:var(--e-4) 0 var(--e-3); }
  .ficha-portal .ps-rp{ min-height:46px; gap:10px; padding:0 18px 0 5px; }
  .ficha-portal .ps-rp-ic{ width:36px; height:36px; }
}
@media (prefers-reduced-motion: reduce){ .ficha-portal .ps-rp{ transition:none; } }

/* Promociones en la columna del cliente (invariante 25, P0.2): como las demas filas de Contacto (rotulo a la izquierda, valor a la derecha),
   con el cuando y el como debajo del valor y el boton abajo a la derecha. */
.ps-panel .ps-cli [data-sec="contacto"] .ce.fc-promos{ flex-direction:column; align-items:stretch; gap:var(--e-2); }
.ps-panel .ps-cli [data-sec="contacto"] .fc-promos-txt{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:var(--e-3); row-gap:2px; align-items:baseline; }
.ps-panel .ps-cli [data-sec="contacto"] .fc-promos-txt .ce-v, .ps-panel .ps-cli [data-sec="contacto"] .fc-promos-meta{ grid-column:2; text-align:right; }
.ps-panel .ps-cli [data-sec="contacto"] .fc-promos .btn{ align-self:flex-end; }