/* Pisos de proyectos (02 Web, apps y e-commerce · 04 Diseño) y su ficha — 13/10/2026.
   Regla de Héctor: los números mandan; texto corto; lo que no urge, plegado. Sin estilos en línea (CSP). */

/* --- Números grandes ---------------------------------------------------------------- */
.pz-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.pz-cifra { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 16px 18px; background: var(--deus-panel-2, #131f35); border: 1px solid var(--deus-borde, #243049); border-left: 3px solid var(--deus-borde-2, #2d3d5c); border-radius: 4px; }
.pz-cifra small { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--deus-tenue, #9fb3c2); font-weight: 600; }
.pz-cifra strong { font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.02em; font-family: var(--orv-titulo, inherit); }
.pz-cifra span { font-size: .78rem; color: var(--deus-tenue, #9fb3c2); }
.pz-cifra.alerta { border-left-color: #f0a24a; }
.pz-cifra.alerta strong { color: #f6c27d; }
.pz-cifra.bien { border-left-color: #4cc38a; }
.pz-cifra.bien strong { color: #7ee0b0; }
.pz-resumen { margin: 4px 0 18px; font-size: .9rem; color: var(--deus-tenue, #9fb3c2); }
.pz-resumen b { color: #fff; font-variant-numeric: tabular-nums; }
.pz-acciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Secciones ------------------------------------------------------------------------ */
.pz-seccion { margin: 22px 0; }
.pz-seccion > h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; font-size: 1.25rem; }
.pz-seccion > h2 small, .pz-col h3 small, .pz-fase h3 small { font-size: .74rem; font-weight: 400; color: var(--deus-tenue, #9fb3c2); letter-spacing: 0; }
.pz-n { display: inline-block; min-width: 1.7em; padding: 1px 8px; border-radius: 99px; background: #18294d; color: #cfe0ff; font-size: .8rem; text-align: center; font-variant-numeric: tabular-nums; }
.pz-vacio { color: var(--deus-tenue, #9fb3c2); margin: 6px 0; }

/* --- Te espera -------------------------------------------------------------------------- */
.pz-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pz-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; background: var(--deus-panel-2, #131f35); border: 1px solid var(--deus-borde, #243049); border-left: 3px solid #5b6f99; border-radius: 4px; }
.pz-fila.pz-cobro, .pz-fila.pz-comision { border-left-color: #f0a24a; }
.pz-fila.pz-renovacion { border-left-color: #e8707a; }
.pz-fila.pz-tarea { border-left-color: #7fa5ff; }
.pz-fila.pz-entrega { border-left-color: #4cc38a; }
.pz-fila-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.pz-fila-texto small { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--deus-tenue, #9fb3c2); }
.pz-fila-texto strong { font-size: 1.02rem; }
.pz-fila-texto span { font-size: .82rem; color: var(--deus-tenue, #9fb3c2); }
.pz-fila-botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pz-fila-botones form { margin: 0; }
.pz-mas { margin-top: 8px; }
.pz-mas summary { cursor: pointer; color: var(--deus-acento, #7fa5ff); }

/* --- Tablero por fases ------------------------------------------------------------------- */
.pz-fases { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(225px, 1fr); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.pz-fase { background: #0f1626; border: 1px solid var(--deus-borde, #243049); border-radius: 4px; padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 72px; }
.pz-fase.vacia { opacity: .55; }
.pz-fase h3, .pz-col h3 { margin: 0; font-size: .95rem; display: flex; flex-direction: column; gap: 1px; }
.pz-tarjeta { margin: 0; padding: 12px; background: var(--deus-panel-2, #131f35); border: 1px solid var(--deus-borde-2, #2d3d5c); border-radius: 4px; display: flex; flex-direction: column; gap: 8px; }
.pz-tarjeta.atrasada { border-color: #f0a24a; }
.pz-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pz-cab a { text-decoration: none; color: #fff; font-size: 1.05rem; }
.pz-chip { font-size: .72rem; padding: 2px 8px; border-radius: 99px; background: #18294d; color: #cfe0ff; white-space: nowrap; }
.pz-chip.alerta { background: #4a3413; color: #f6c27d; }
.pz-tarjeta progress { width: 100%; height: 10px; accent-color: #7fa5ff; }
.pz-avance { margin: 0; font-size: .82rem; color: var(--deus-tenue, #9fb3c2); }
.pz-avance b { color: #fff; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.pz-tareas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pz-tareas li { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; }
.pz-tareas li.hecha span { text-decoration: line-through; color: var(--deus-tenue, #9fb3c2); }
.pz-tarea-form { margin: 0; flex: none; }
.pz-check { width: 28px; height: 28px; min-width: 28px; padding: 0; border-radius: 4px; border: 1px solid #5b6f99; background: transparent; color: #cfe0ff; font-size: .95rem; line-height: 1; cursor: pointer; }
.pz-check.hecha { background: #1c4a36; border-color: #4cc38a; color: #7ee0b0; }
.pz-meta { margin: 0; font-size: .76rem; color: var(--deus-tenue, #9fb3c2); border-top: 1px solid var(--deus-borde, #243049); padding-top: 6px; }
.pz-plan-form { display: grid; gap: 8px; }
.pz-plan-form label { font-size: .78rem; display: grid; gap: 3px; }

/* --- El resto del embudo --------------------------------------------------------------------- */
.pz-embudo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: start; }
.pz-col { display: flex; flex-direction: column; gap: 8px; }
.pz-col h3 { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.pz-mini { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--deus-panel-2, #131f35); border: 1px solid var(--deus-borde, #243049); border-radius: 4px; text-decoration: none; color: inherit; }
.pz-mini:hover { border-color: var(--deus-acento, #7fa5ff); }
.pz-mini strong { color: #fff; }
.pz-mini span { font-size: .8rem; color: var(--deus-tenue, #9fb3c2); }
.pz-mini .pz-mini-pie { color: #cfe0ff; font-variant-numeric: tabular-nums; }
.pz-perdidos { max-width: 520px; }
.pz-perdidos-boton { margin: 14px 0; }

/* --- Plegables ------------------------------------------------------------------------------ */
.pz-plegable { margin: 14px 0; padding: 0 14px; background: var(--deus-panel, #101a2c); border: 1px solid var(--deus-borde, #243049); border-radius: 4px; }
.pz-plegable > summary { cursor: pointer; padding: 12px 0; list-style: none; }
.pz-plegable > summary::-webkit-details-marker { display: none; }
.pz-plegable > summary::after { content: "＋"; float: right; color: var(--deus-acento, #7fa5ff); }
.pz-plegable[open] > summary::after { content: "−"; }
.pz-plegable > summary h2 { display: inline; margin: 0; font-size: 1.05rem; }
.pz-plegable[open] { padding-bottom: 14px; }

/* =========================== La ficha de un proyecto =========================== */
.pz-ficha { border: 1px solid var(--deus-borde, #243049); border-radius: 4px; padding: 16px; margin: 12px 0; background: var(--deus-panel, #101a2c); display: grid; gap: 12px; }
.pz-ficha h1 { margin: 2px 0 4px; font-size: 1.6rem; }
.pz-ficha .eyebrow { margin: 0; }
.pz-contacto { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: .9rem; }
.pz-barra { display: grid; gap: 6px; padding: 12px; background: #0f1626; border: 1px solid var(--deus-borde, #243049); border-radius: 4px; }
.pz-barra progress { width: 100%; height: 14px; accent-color: #7fa5ff; }
.pz-barra-texto { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin: 0; }
.pz-barra-texto strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; line-height: 1; }
.pz-barra-texto span { font-size: .84rem; color: var(--deus-tenue, #9fb3c2); align-self: flex-end; }
.pz-fases-mini { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pz-fases-mini li { flex: 1; font-size: .68rem; text-align: center; padding: 4px 2px; border-radius: 3px; background: #131f35; color: var(--deus-tenue, #9fb3c2); }
.pz-fases-mini li.listo { background: #1c4a36; color: #7ee0b0; }
.pz-fases-mini li.actual { background: #18294d; color: #fff; outline: 1px solid #7fa5ff; }
.pz-pendientes h2, .pz-ficha-bloque h2 { margin: 0 0 6px; font-size: 1rem; }
.pz-pendientes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pz-pendientes li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.pz-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pz-chips .pz-chip { font-size: .8rem; padding: 4px 10px; }
.pz-chips .pz-chip.alerta { background: #4a3413; color: #f6c27d; }
.pz-chips .pz-chip.roja { background: #4a1d22; color: #f4a3aa; }
.pz-chips a.pz-chip { text-decoration: none; }
.pz-ficha-bloque { margin: 8px 0; padding: 0 14px; background: var(--deus-panel, #101a2c); border: 1px solid var(--deus-borde, #243049); border-radius: 4px; }
.pz-ficha-bloque > summary { cursor: pointer; padding: 12px 0; list-style: none; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pz-ficha-bloque > summary::-webkit-details-marker { display: none; }
.pz-ficha-bloque > summary::after { content: "＋"; margin-left: auto; color: var(--deus-acento, #7fa5ff); }
.pz-ficha-bloque[open] > summary::after { content: "−"; }
.pz-ficha-bloque > summary h2 { margin: 0; font-size: 1.02rem; }
.pz-ficha-bloque > summary small { color: var(--deus-tenue, #9fb3c2); font-size: .8rem; }
.pz-ficha-bloque[open] { padding-bottom: 14px; }
.pz-dinero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.pz-dinero dt { font-size: .74rem; opacity: .7; text-transform: uppercase; letter-spacing: .06em; }
.pz-dinero dd { margin: 0; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pz-fase-plan { margin: 10px 0 4px; }
.pz-fase-plan h3 { margin: 0 0 6px; font-size: .95rem; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.pz-fase-plan h3 small { font-weight: 400; color: var(--deus-tenue, #9fb3c2); }
.pz-fase-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pz-fase-plan li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; }
.pz-fase-plan li.hecha span { text-decoration: line-through; color: var(--deus-tenue, #9fb3c2); }
.pz-fase-plan li small { color: var(--deus-tenue, #9fb3c2); }
.pz-form-linea { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; align-items: end; margin: 8px 0; }
.pz-enlaces { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.pz-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 6px 0 10px; }
.pz-tabla th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--deus-tenue, #9fb3c2); padding: 4px 6px; }
.pz-tabla td { padding: 6px; border-top: 1px solid var(--deus-borde, #243049); font-variant-numeric: tabular-nums; }
.pz-nota-privada { font-size: .8rem; color: var(--deus-tenue, #9fb3c2); }

/* El botón de guardar de cualquier ficha se queda a la vista mientras se edita (Héctor, 13/10/2026). */
.order-form .guardar-fijo { display: none; }
.order-form:has(.ficha-editar[open]) .guardar-fijo { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 8px; padding: 10px 0; background: linear-gradient(180deg, transparent, var(--deus-fondo, #0a0f1a) 38%); }
.order-form .guardar-fijo button { flex: 1; }

@media (max-width: 640px) {
  .pz-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pz-cifra { padding: 12px 12px; }
  .pz-fila-botones { width: 100%; }
  .pz-fila-botones .button, .pz-fila-botones button { flex: 1; }
  .pz-dinero { grid-template-columns: 1fr; }
}