/* Panel y Documentos y Miro. Idea de diseño: el Panel es un centro de mando (el contador del Q en grande,
   siete tarjetas con su avance de rellenado y una lista corta de lo que falta); Documentos y Miro es una
   estantería ordenada por sección, con una hoja de vista previa según el tipo de archivo.
   Todas las clases llevan el prefijo p0-. Sin !important. Colores del sistema. */

/* Contenedores sin tarjeta: la pieza se dibuja como tarjeta propia */
.c:has(>.p0-flat){padding:0;background:none;box-shadow:none}
.modo-ed .c:has(>.p0-flat){box-shadow:none}

/* ---------- Panel: contador del Q ---------- */
.p0-hero{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:28px 44px;padding:34px 38px;border-radius:18px;background:linear-gradient(155deg,#8E1A3A 0%,#5C0F26 100%);color:#fff;box-shadow:0 10px 28px rgba(92,15,38,.22)}
.p0-izq{display:flex;flex-direction:column;gap:10px;min-width:0}
.p0-ey{margin:0;font-size:13px;line-height:18px;font-weight:600;color:rgba(255,255,255,.88)}
.p0-num{margin:0;font-size:60px;line-height:64px;font-weight:700;letter-spacing:-.04em;overflow-wrap:anywhere}
.p0-de{margin:0;font-size:16px;line-height:24px;color:rgba(255,255,255,.88)}
.p0-pista{position:relative;height:12px;margin:14px 0 6px;border-radius:99px;background:rgba(255,255,255,.22)}
.p0-pista i{display:block;height:100%;border-radius:99px;background:#fff;animation:grow .9s cubic-bezier(.2,.8,.2,1)}
.p0-pista em{position:absolute;top:-6px;width:3px;height:24px;margin-left:-1px;border-radius:2px;background:#F4E3E8;box-shadow:0 0 0 2px rgba(92,15,38,.9)}
.p0-leyenda{margin:0;font-size:13px;line-height:18px;color:rgba(255,255,255,.88)}
.p0-est{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.p0-datos{display:flex;flex-direction:column;justify-content:center;gap:0;margin:0;padding:0 0 0 36px;border-left:1px solid rgba(255,255,255,.24)}
.p0-dato{display:flex;flex-direction:column;gap:2px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.p0-dato:first-child{padding-top:0}
.p0-dato:last-child{padding-bottom:0;border-bottom:0}
.p0-dato dt{font-size:13px;line-height:18px;color:rgba(255,255,255,.88)}
.p0-dato dd{margin:0;font-size:26px;line-height:32px;font-weight:700;letter-spacing:-.025em}
.p0-btn{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border:0;border-radius:999px;background:#fff;color:#7A1230;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s ease-out}
.p0-btn:hover{background:#F4E3E8}
.p0-vacio{grid-template-columns:minmax(0,1fr);justify-items:start}
.p0-nota{display:none;margin:0;font-size:13px;line-height:18px;color:rgba(255,255,255,.88)}
.modo-ed .p0-nota{display:block}

/* ---------- Panel: siete palancas ---------- */
.p0-pal{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.p0-card{display:flex;flex-direction:column;gap:8px;height:100%;min-height:156px;padding:16px;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.03),0 4px 16px rgba(0,0,0,.035);transition:box-shadow .2s ease-out,transform .2s ease-out}
.p0-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.1);transform:translateY(-1px)}
.p0-n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#F4E3E8;color:#7A1230;font-size:13px;font-weight:700}
.p0-nom{font-size:16px;line-height:20px;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.p0-cuenta{margin-top:auto;font-size:13px;line-height:18px;color:#6E6E73}
.p0-cuenta b{font-size:28px;line-height:32px;font-weight:700;letter-spacing:-.03em;color:#1D1D1F}
.p0-mini{display:block;height:6px;border-radius:99px;background:#E8E8ED}
.p0-mini i{display:block;height:100%;border-radius:99px;background:#7A1230;animation:grow .9s cubic-bezier(.2,.8,.2,1)}
.p0-estado{display:inline-flex;align-items:center;gap:5px;font-size:12px;line-height:16px;font-weight:600;color:#6E6E73}
.p0-estado.ok{color:#1B7A33}
.p0-estado.medio{color:#9A4F00}

/* ---------- Panel: qué falta rellenar ---------- */
.p0-falta{display:flex;flex-direction:column;gap:10px}
.p0-fila{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(0,190px) auto;gap:6px 16px;align-items:center;min-height:64px;padding:10px 16px;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.03),0 4px 16px rgba(0,0,0,.035);transition:box-shadow .2s ease-out,transform .2s ease-out}
.p0-fila:hover{box-shadow:0 8px 24px rgba(0,0,0,.1);transform:translateY(-1px)}
.p0-ft{min-width:0}
.p0-ft b{display:block;font-size:15px;line-height:20px;font-weight:600;overflow-wrap:anywhere}
.p0-ft small{display:block;font-size:12px;line-height:16px;color:#6E6E73}
.p0-fb{display:flex;flex-direction:column;gap:5px;font-size:12px;line-height:16px;color:#6E6E73}
.p0-fb b{color:#1D1D1F}
.p0-go{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:#F4E3E8;color:#7A1230;font-size:13px;font-weight:600;white-space:nowrap}
.p0-fila:hover .p0-go{background:#E3B8C5}
.p0-ok{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:14px;background:#E9F6EC;color:#1B7A33}
.p0-ok span{display:block;font-size:14px;line-height:20px;color:#1D1D1F}
.p0-ok b{display:block;font-size:16px;line-height:22px}

/* ---------- Documentos y Miro: cabecera ---------- */
.p0-bhero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(150px,.8fr);gap:24px 36px;align-items:center;padding:32px 36px;border-radius:18px;background:linear-gradient(135deg,#fff 55%,#F4E3E8 100%);box-shadow:0 1px 2px rgba(0,0,0,.03),0 4px 16px rgba(0,0,0,.035)}
.p0-btotal{display:flex;flex-direction:column;gap:6px;min-width:0}
.p0-btotal .p0-bn{margin:0;font-size:60px;line-height:64px;font-weight:700;letter-spacing:-.04em;color:#7A1230}
.p0-btotal p{margin:0}
.p0-btotal .p0-bt{font-size:16px;line-height:24px;color:#6E6E73}
.p0-tipos{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.p0-tipos li{display:flex;align-items:center;gap:12px;min-height:48px;border-bottom:1px solid rgba(0,0,0,.07);font-size:15px;line-height:20px}
.p0-tipos li:last-child{border-bottom:0}
.p0-tipos svg{flex:none;color:#7A1230}
.p0-tipos b{margin-left:auto;font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.02em}
.p0-fan{position:relative;height:110px;min-width:150px}
.p0-fan .p0-tile{position:absolute;top:8px}
.p0-fan .p0-tile:nth-child(1){left:6px;transform:rotate(-9deg)}
.p0-fan .p0-tile:nth-child(2){left:44px;transform:rotate(0deg);z-index:1}
.p0-fan .p0-tile:nth-child(3){left:82px;transform:rotate(9deg)}
.p0-fan .p0-ghost path{stroke-dasharray:4 4}

/* ---------- Documentos y Miro: estantería ---------- */
.p0-estante{display:flex;flex-direction:column;gap:24px}
.p0-grupo{display:flex;flex-direction:column;gap:12px}
.p0-gh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0;font-size:20px;line-height:26px;font-weight:700;letter-spacing:-.02em}
.p0-gh span{font-size:13px;line-height:18px;font-weight:500;color:#6E6E73;letter-spacing:0}
.p0-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.p0-doc{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 16px;padding:16px;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.03),0 4px 16px rgba(0,0,0,.035)}
.p0-tile{position:relative;display:block;width:56px;height:68px;flex:none}
.p0-tile svg{width:56px;height:68px;overflow:visible}
.p0-tile .p0-pp{fill:#fff;stroke:#C9798F;stroke-width:1.7;stroke-linejoin:round}
.p0-tile .p0-pf{fill:#F4E3E8;stroke:#C9798F;stroke-width:1.7;stroke-linejoin:round}
.p0-tile.t-miro .p0-pp,.p0-tile.t-enlace .p0-pp{fill:#F4E3E8}
.p0-tile.t-enlace .p0-pp,.p0-tile.t-enlace .p0-pf{fill:#F5F5F7;stroke:#6E6E73}
.p0-tile.t-enlace .p0-gl{stroke:#424245}
.p0-gl{fill:none;stroke:#7A1230;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.p0-ext{position:absolute;left:-6px;bottom:6px;padding:1px 6px;border-radius:6px;background:#7A1230;color:#fff;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.02em}
.p0-tile.t-enlace .p0-ext{background:#424245}
.p0-dt{min-width:0;display:flex;flex-direction:column;gap:2px}
.p0-dt b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:15px;line-height:20px;font-weight:600;overflow-wrap:anywhere}
.p0-dt small{font-size:12px;line-height:16px;color:#6E6E73;overflow-wrap:anywhere}
.p0-acc-f{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.p0-acc{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:#7A1230;color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s ease-out}
.p0-acc:hover{background:#5C0F26}
.p0-acc.alt{background:rgba(0,0,0,.06);color:#1D1D1F}
.p0-acc.alt:hover{background:rgba(0,0,0,.1)}
.p0-acc.off{background:#F0F0F2;color:#6E6E73;cursor:default}
.p0-sin{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:14px;background:rgba(0,0,0,.035)}
.p0-sin p{margin:0;font-size:14px;line-height:20px;color:#424245}
.p0-sin-l{display:flex;flex-wrap:wrap;gap:6px}
.p0-sin-l a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;background:#fff;color:#7A1230;font-size:13px;font-weight:600;box-shadow:0 0 0 1px rgba(0,0,0,.07)}
.p0-sin-l a:hover{background:#F4E3E8}
.p0-vacio-b{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:28px;border:1.5px dashed #C9798F;border-radius:18px;background:rgba(122,18,48,.03)}
.p0-vacio-b h3{margin:0;font-size:20px;line-height:26px;font-weight:700;letter-spacing:-.02em}
.p0-vacio-b p{margin:0;max-width:560px;font-size:15px;line-height:22px;color:#424245}

@media (max-width:900px){
.p0-hero{grid-template-columns:minmax(0,1fr);padding:26px 22px}
.p0-num{font-size:48px;line-height:52px}
.p0-datos{padding:18px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.24)}
.p0-pal{grid-template-columns:repeat(2,minmax(0,1fr))}
.p0-fila{grid-template-columns:32px minmax(0,1fr)}
.p0-fb,.p0-go{grid-column:2}
.p0-bhero{grid-template-columns:minmax(0,1fr);padding:26px 22px}
.p0-btotal .p0-bn{font-size:48px;line-height:52px}
.p0-grid{grid-template-columns:minmax(0,1fr)}
.p0-vacio-b{padding:22px 18px}
}
@media (prefers-reduced-motion:reduce){
.p0-pista i,.p0-mini i{animation:none}
.p0-card,.p0-fila{transition:none}
.p0-card:hover,.p0-fila:hover{transform:none}
}