/* 存在 Presencia digital v2 (orden AAA, 24-oct-2026) · js/presencia.js · diseños en docs/disenos-aprobados/Presencia*.html */
.pz { --pz-card: rgba(18,21,29,.86); --pz-in: #1A1D27; --pz-line: #262A38; --pz-mut: #9AA1B5; --pz-tx: #E9E6DF; --pz-tq: #2EE6D6; --pz-au: #FFB21A; --pz-rd: #FF2E4D; --pz-or: #FF9F43; --pz-gr: #3DDC84;
  display: flex; flex-direction: column; gap: 20px; color: var(--pz-tx); font-family: Outfit, system-ui, sans-serif; }
.pz .muted { color: var(--pz-mut); }
.pz .t-ok { color: var(--pz-gr); } .pz .t-medio { color: var(--pz-or); } .pz .t-mal { color: var(--pz-rd); } .pz .t-gris { color: var(--pz-mut); }
.pz-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pz-tt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pz-kj { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .2em; color: var(--pz-rd); }
.pz-top h2 { margin: 0; font-family: Cinzel, serif; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: .06em; }
.pz-sub { font-size: 14px; color: var(--pz-mut); }
.pz-der { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pz-pill { padding: 10px 16px; border: 1px solid var(--pz-line); border-radius: 10px; font-size: 14px; }
.pz-back { color: var(--pz-tq); font-size: 14px; text-decoration: none; align-self: flex-start; margin-bottom: -10px; }
.pz-back:hover { text-decoration: underline; }
.pz-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 12px; border: 0; background: var(--pz-tq); color: #0B0D12; font: 600 14px Outfit, sans-serif; cursor: pointer; text-decoration: none; }
.pz-btn.ghost { background: transparent; color: var(--pz-tx); border: 1px solid var(--pz-line); font-weight: 500; }
.pz-btn:hover { filter: brightness(1.08); } .pz-btn.ghost:hover { border-color: var(--pz-tq); }
.pz-btn[disabled] { opacity: .6; cursor: wait; }
.pz-btn:focus-visible, .pz-door:focus-visible, .pz-det summary:focus-visible, .pz-art:focus-visible { outline: 2px solid var(--pz-tq); outline-offset: 3px; }
.pz-form { display: flex; gap: 8px; flex-wrap: wrap; }
.pz-form .in { min-width: 240px; min-height: 42px; }
.pz-card { background: var(--pz-card); border: 1px solid var(--pz-line); border-radius: 16px; padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pz-sy { font-family: Syncopate, sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .22em; color: var(--pz-mut); }

/* entrada · dos puertas */
.pz-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pz-door { box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; min-height: 440px; padding: 28px; border-radius: 20px; color: inherit; text-decoration: none; background: #12151D; transition: transform .15s, box-shadow .2s; }
.pz-door:hover { transform: translateY(-2px); }
.pz-d-seo { background: radial-gradient(ellipse at 15% 0%, rgba(46,230,214,.12), transparent 60%), #12151D; border: 1px solid rgba(46,230,214,.45); }
.pz-d-seo:hover { box-shadow: 0 0 40px rgba(46,230,214,.15); }
.pz-d-ia { background: radial-gradient(ellipse at 85% 0%, rgba(255,178,26,.13), transparent 60%), #12151D; border: 1px solid rgba(255,178,26,.5); }
.pz-d-ia:hover { box-shadow: 0 0 40px rgba(255,178,26,.15); }
.pz-d-seo .pz-kj { color: var(--pz-tq); } .pz-d-ia .pz-kj { color: var(--pz-au); }
.pz-dh { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pz-dh > div:first-child { display: flex; flex-direction: column; gap: 6px; }
.pz-dt { font-size: 30px; font-weight: 600; } .pz-ds { font-size: 15px; color: var(--pz-mut); }
.pz-nota { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1px solid var(--pz-line); border-radius: 14px; padding: 10px 16px; white-space: nowrap; }
.pz-nota span { font-size: 11px; color: var(--pz-mut); } .pz-nota b { font-size: 40px; font-weight: 600; line-height: 1; }
.pz-quote { margin: 0; background: var(--pz-in); border-radius: 14px; padding: 16px; font-size: 16px; line-height: 1.5; }
.pz-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pz-kpis.pz-k4 { grid-template-columns: repeat(4, 1fr); }
.pz-kpis > div { border: 1px solid var(--pz-line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.pz-kpis span { font-size: 12px; color: var(--pz-mut); } .pz-kpis b { font-size: 22px; font-weight: 600; }
.pz-bars { display: flex; flex-direction: column; gap: 8px; }
.pz-bar { display: grid; grid-template-columns: 130px 1fr 52px; gap: 10px; align-items: center; font-size: 14px; }
.pz-bar i { height: 8px; border-radius: 99px; background: #3A3F52; overflow: hidden; } .pz-bar em { display: block; height: 100%; border-radius: 99px; background: var(--pz-mut); }
.pz-bar.own, .pz-bar.own b { color: var(--pz-tq); font-weight: 600; } .pz-bar.own em { background: var(--pz-tq); }
.pz-bar .n { text-align: right; }
.pz-in { font-size: 13px; color: var(--pz-mut); }
.pz-go { align-self: flex-start; margin-top: auto; padding: 12px 20px; border-radius: 12px; font-size: 15px; font-weight: 600; color: #0B0D12; }
.pz-d-seo .pz-go { background: var(--pz-tq); } .pz-d-ia .pz-go { background: var(--pz-au); }
.pz-hhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pz-hhead > div { display: flex; flex-direction: column; gap: 2px; } .pz-hhead b { font-size: 18px; font-weight: 600; }
.pz-hist { display: flex; flex-direction: column; }
.pz-hr { display: grid; grid-template-columns: 150px 1fr 160px 60px; gap: 8px; font-size: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(38,42,56,.6); }
.pz-hr.pz-h3 { grid-template-columns: 150px 1fr 60px; }
.pz-hr.pz-hh { font-size: 12px; color: var(--pz-mut); letter-spacing: .06em; }
.pz-hr a { color: var(--pz-tq); text-decoration: none; } .pz-hr a:hover { text-decoration: underline; }
.pz-vacio { background: var(--pz-card); border: 1px dashed var(--pz-line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pz-vacio p { margin: 0; font-size: 16px; }

/* puertas · nivel 1 y 2 */
.pz-nivel { display: flex; align-items: center; gap: 14px; }
.pz-nv { font-family: Syncopate, sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .22em; color: var(--pz-tq); white-space: nowrap; }
.pz-ns { font-size: 13px; color: var(--pz-mut); } .pz-nivel i { flex: 1; height: 1px; background: var(--pz-line); }
.pz-l1 { flex-direction: row; align-items: stretch; gap: 24px; }
.pz-big { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; min-width: 170px; padding: 8px 18px; border-right: 1px solid var(--pz-line); }
.pz-big span { font-size: 13px; color: var(--pz-mut); } .pz-big b { font-size: 52px; font-weight: 600; line-height: 1; white-space: nowrap; } .pz-big small { font-size: 13px; color: var(--pz-mut); }
.pz-lect { flex: 1; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.pz-lect > b { font-size: 18px; font-weight: 500; line-height: 1.5; }
.pz-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pz-3 > div { background: var(--pz-in); border-radius: 12px; padding: 12px 14px; border-left: 3px solid var(--pz-mut); }
.pz-3 span { font-family: Syncopate, sans-serif; font-weight: 700; font-size: 9px; letter-spacing: .2em; } .pz-3 p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; }
.pz-3 .ok { border-color: var(--pz-gr); } .pz-3 .ok span { color: var(--pz-gr); }
.pz-3 .mal { border-color: var(--pz-or); } .pz-3 .mal span { color: var(--pz-or); }
.pz-3 .urg { border-color: var(--pz-rd); } .pz-3 .urg span { color: var(--pz-rd); }
.pz-l1ia .pz-rk { width: 320px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.pz-cab { display: flex; justify-content: space-between; align-items: center; font-size: 17px; font-weight: 600; gap: 10px; }
.pz-prio { display: grid; grid-template-columns: 34px 1fr auto 150px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(38,42,56,.6); font-size: 15px; }
.pz-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(46,230,214,.14); color: var(--pz-tq); font-size: 14px; }
.pz-tag { font-size: 12px; padding: 4px 10px; border-radius: 99px; background: var(--pz-in); color: var(--pz-mut); white-space: nowrap; }
.pz-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; padding-top: 6px; }
.pz-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pz-pasos > div { background: var(--pz-in); border-radius: 12px; padding: 14px; }
.pz-pasos span { font-family: Syncopate, sans-serif; font-weight: 700; font-size: 9px; letter-spacing: .18em; color: var(--pz-au); } .pz-pasos p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.pz-det { background: var(--pz-card); border: 1px solid var(--pz-line); border-radius: 16px; }
.pz-det > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 34px auto 1fr auto; gap: 12px; align-items: center; padding: 16px 22px; }
.pz-det > summary::-webkit-details-marker { display: none; }
.pz-djp { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 20px; color: var(--pz-rd); }
.pz-det > summary b { font-size: 16px; font-weight: 600; } .pz-dsub { font-size: 13px; color: var(--pz-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-dab { font-size: 13px; color: var(--pz-tq); } .pz-dab::after { content: 'Abrir ⌄'; } .pz-det[open] .pz-dab::after { content: 'Cerrar ⌃'; }
.pz-det[open] { border-color: rgba(46,230,214,.35); }
.pz-dbody { padding: 0 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.pz-fila { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(38,42,56,.6); font-size: 14px; }
.pz-mas > summary { cursor: pointer; color: var(--pz-tq); font-size: 14px; padding: 4px 0; }
.pz-mas[open] > summary { margin-bottom: 10px; }
.pz-mas a { color: var(--pz-tq); }
.pz-ias { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pz-ia { background: var(--pz-in); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.pz-ia span { font-size: 13px; }
.pz-dbody > .pz-btn { align-self: flex-start; }
.pz-src { display: flex; flex-wrap: wrap; gap: 8px; } .pz-src span { padding: 6px 12px; border-radius: 99px; background: var(--pz-in); font-size: 13px; } .pz-src small { color: var(--pz-mut); }
.pz-intel .mx-solo { padding: 0; }

/* celular: resumen en capítulos (PresenciaMovil.html) */
.pz-movil { display: none; }
@media (max-width: 760px) {
  .pz .rd-t { display: block; overflow-x: auto; }
  .pz-ns { display: none; }
  .pz { gap: 14px; }
  .pz-top h2 { font-size: 22px; } .pz-der { width: 100%; } .pz-form, .pz-form .in { width: 100%; min-width: 0; }
  .pz-doors { display: none; }
  .pz-movil { display: flex; flex-direction: column; gap: 12px; }
  .pz-caps { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .pz-caps a { flex: none; padding: 8px 14px; border: 1px solid var(--pz-line); border-radius: 99px; font-size: 13px; color: var(--pz-tx); text-decoration: none; }
  .pz-caps a.on { background: var(--pz-tq); color: #0B0D12; border-color: var(--pz-tq); font-weight: 600; }
  .pz-mnota { display: flex; gap: 14px; align-items: center; background: var(--pz-card); border: 1px solid var(--pz-line); border-radius: 16px; padding: 16px; }
  .pz-mnota b { font-size: 48px; font-weight: 600; line-height: 1; } .pz-mnota span { font-size: 14px; color: var(--pz-mut); }
  .pz-art { display: flex; flex-direction: column; gap: 4px; background: var(--pz-card); border: 1px solid var(--pz-line); border-radius: 14px; padding: 14px 16px; color: inherit; text-decoration: none; }
  .pz-art span { font-family: Syncopate, sans-serif; font-weight: 700; font-size: 9px; letter-spacing: .2em; color: var(--pz-tq); } .pz-art b { font-size: 17px; font-weight: 600; } .pz-art small { font-size: 13px; color: var(--pz-mut); }
  .pz-card { padding: 16px; }
  .pz-l1 { flex-direction: column; gap: 14px; } .pz-big { border-right: 0; border-bottom: 1px solid var(--pz-line); padding-bottom: 14px; } .pz-l1ia .pz-rk { width: auto; }
  .pz-3, .pz-pasos { grid-template-columns: 1fr; } .pz-kpis.pz-k4 { grid-template-columns: 1fr 1fr; } .pz-ias { grid-template-columns: 1fr 1fr; }
  .pz-prio { grid-template-columns: 30px 1fr; } .pz-prio .pz-tag, .pz-prio > .muted { grid-column: 2; justify-self: start; }
  .pz-hr { grid-template-columns: 1fr auto; } .pz-hr > span:first-child { grid-column: 1 / -1; font-size: 12px; color: var(--pz-mut); } .pz-hr.pz-hh { display: none; }
  .pz-hr.pz-h3 { grid-template-columns: 1fr auto; }
  .pz-det > summary { grid-template-columns: 30px 1fr auto; padding: 14px 16px; } .pz-dsub { grid-column: 2 / -1; white-space: normal; } .pz-dab { grid-row: 1; grid-column: 3; } .pz-dbody { padding: 0 16px 16px; }
  .pz-bar { grid-template-columns: 100px 1fr 44px; }
  .pz-acts { justify-content: stretch; } .pz-acts > * { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .pz-door { transition: none; } .pz-door:hover { transform: none; } }
