/* ═══════════════════════════════════════════════════════════════════════
   NotarIA — componentes propios de capacidades.html.

   Casi todo lo que hay aquí son las cuatro maquetas de producto del panel
   de pestañas: una llamada en curso, una conversación de WhatsApp, una
   semana de agenda y un reporte. Son ilustraciones de interfaz, no
   capturas, y cada una lo declara con `.aviso`.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ Panel de frentes ══════════════════════════════════════════════ */
#panelCap{margin-top:var(--e5)}
/* Reserva de altura: sin ella, cambiar de pestaña salta la página. */
@media (min-width:1181px){#panelCap{min-height:430px}}
#panelCap .pane{align-items:start}
.cap-tarjs{margin-top:var(--e5)}
.cap-tarjs .tit{font-size:var(--t-5)}
.cap-enl{margin-top:var(--e5)}

/* ═══ Maqueta: cuerpo común ═════════════════════════════════════════
   Toda ilustración de interfaz declara que es un ejemplo. */
.aviso{font-size:var(--t-1);line-height:1.5;color:var(--tx-3)}
.claro .aviso,.blanco .aviso,.bruma .aviso{color:var(--gris)}
.maq-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
  font-size:var(--t-1);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3)}
.maq-viva{display:flex;align-items:center;gap:var(--e2)}
.maq-viva::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--tea);box-shadow:0 0 0 4px rgba(0,175,186,.18)}
.maq-et{font-size:var(--t-1);letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3)}
.maq-tx{font-size:var(--t-3);line-height:1.55;margin-top:var(--e1)}
.maq-avi{margin-top:var(--e3)}
/* Confirmación: el único elemento en turquesa de la maqueta. */
.maq-ok{display:block;margin-top:var(--e4);padding:9px 12px;border-radius:var(--r-1);
  border:1px solid rgba(0,175,186,.4);background:rgba(0,175,186,.12);
  font-size:var(--t-2);color:#EAFDFC}

/* ═══ Maqueta 1 · llamada en curso ══════════════════════════════════
   Veinticuatro barras con ocho alturas y siete desfases: el patrón se
   repite sin que se lea como repetición. */
.onda{display:flex;align-items:center;gap:3px;height:28px;margin-block:var(--e4)}
.onda i{display:block;flex:none;width:3px;border-radius:2px;background:var(--tea);
  animation:onda 1.15s ease-in-out infinite}
@keyframes onda{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
/* Fuera de pantalla la onda se detiene: no hay razón para animar lo que
   nadie está viendo. La clase la pone paneles-capacidades.js. */
#capacidades.pausa .onda i{animation-play-state:paused}
.onda i:nth-child(8n+1){height:24px;opacity:1}
.onda i:nth-child(8n+2){height:9px;opacity:.64}
.onda i:nth-child(8n+3){height:14px;opacity:.77}
.onda i:nth-child(8n+4){height:26px;opacity:1}
.onda i:nth-child(8n+5){height:11px;opacity:.69}
.onda i:nth-child(8n+6){height:19px;opacity:.9}
.onda i:nth-child(8n+7){height:22px;opacity:.98}
.onda i:nth-child(8n+8){height:8px;opacity:.61}
.onda i:nth-child(7n+1){animation-delay:0ms}
.onda i:nth-child(7n+2){animation-delay:90ms}
.onda i:nth-child(7n+3){animation-delay:180ms}
.onda i:nth-child(7n+4){animation-delay:270ms}
.onda i:nth-child(7n+5){animation-delay:360ms}
.onda i:nth-child(7n+6){animation-delay:450ms}
.onda i:nth-child(7n+7){animation-delay:540ms}

/* ═══ Maqueta 2 · WhatsApp ══════════════════════════════════════════
   Colores propios de la aplicación: es lo que hace reconocible el
   ejemplo. Son los únicos valores fijos de toda la hoja. */
.chat{border-radius:var(--r-3);overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.chat-cab{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#202C33}
.chat-av{display:grid;place-items:center;flex:none;width:30px;height:30px;
  border-radius:50%;background:#128C7E;color:#fff;font-size:var(--t-2)}
.chat-id{line-height:1.3}
.chat-id b{display:block;font-weight:400;font-size:var(--t-2);color:#E9EDEF}
.chat-id span{display:block;font-size:var(--t-1);color:#8696A0}
.chat-cuerpo{display:flex;flex-direction:column;gap:7px;padding:14px;background:#0B141A}
.msj{max-width:86%;padding:8px 11px 6px;font-size:var(--t-2);line-height:1.45;color:#E9EDEF}
.msj-e{align-self:flex-start;background:#202C33;border-radius:8px 8px 8px 2px}
.msj-s{align-self:flex-end;background:#005C4B;border-radius:8px 8px 2px 8px}
.hora{display:block;margin-top:2px;text-align:right;font-size:var(--t-1);color:#8696A0}
.msj-s .hora{color:#B9CFC8}
.hora i{font-style:normal;color:#53BDEB}
.msj-s .hora i{color:#8FD3F4}

/* ═══ Maqueta 3 · agenda ════════════════════════════════════════════ */
.cal-dias,.cal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.cal-dias{margin-top:var(--e3);text-align:center;font-size:var(--t-1);color:var(--tx-3)}
.cal{margin-top:6px}
.cal span{display:grid;place-items:center;height:26px;border-radius:6px;
  background:rgba(255,255,255,.04);font-size:var(--t-1);color:var(--tx-3)}
.cal .ocu{background:rgba(255,255,255,.1)}
.cal .mia{background:var(--tea);color:var(--tinta)}
.cita{margin-top:var(--e4);padding:13px 15px;border-radius:var(--r-2);
  border:1px solid rgba(0,175,186,.4);background:rgba(0,175,186,.1)}
.cita-e{font-size:var(--t-1);letter-spacing:.18em;text-transform:uppercase;color:var(--tea-cl)}
.cita-t{margin-top:6px;font-size:var(--t-4);color:#fff}
.cita-h{margin-top:2px;font-size:var(--t-3);color:var(--tx-2)}
.cita-c{margin-top:6px;font-size:var(--t-2);color:var(--tx-3)}

/* ═══ Maqueta 4 · reporte ═══════════════════════════════════════════ */
.rep-cab{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e3)}
.rep-d{font-size:var(--t-2);color:var(--tea-cl)}
.barras{display:flex;align-items:flex-end;gap:6px;height:96px;margin-top:var(--e4)}
.barras span{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.barras i{display:block;border-radius:5px 5px 2px 2px;transform-origin:bottom;
  background:linear-gradient(180deg,var(--tea),rgba(0,175,186,.35));
  animation:crece 750ms var(--curva) backwards}
@keyframes crece{from{transform:scaleY(.04)}to{transform:scaleY(1)}}
.barras span:nth-child(1) i{height:62%;animation-delay:120ms}
.barras span:nth-child(2) i{height:38%;animation-delay:190ms}
.barras span:nth-child(3) i{height:74%;animation-delay:260ms}
.barras span:nth-child(4) i{height:45%;animation-delay:330ms}
.barras span:nth-child(5) i{height:88%;animation-delay:400ms}
.barras span:nth-child(6) i{height:52%;animation-delay:470ms}
.barras span:nth-child(7) i{height:70%;animation-delay:540ms}
.rep-x{display:flex;justify-content:space-between;margin-top:var(--e2);
  font-size:var(--t-1);color:var(--tx-3)}
.rep-lista{list-style:none;margin-top:var(--e4);padding-top:var(--e4);
  border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:7px}
.rep-lista li{display:flex;justify-content:space-between;gap:var(--e3);
  font-size:var(--t-3);color:var(--tx-2)}
.rep-lista b{font-weight:400;color:#fff}

/* ═══ Puntos de corte ═══════════════════════════════════════════════ */
@media (max-width:1180px){
  /* Con la dupla ya en una columna, la maqueta pasa delante: es lo que
     explica el frente de atención antes de leer los cuatro puntos. */
  #panelCap .pane{display:flex;flex-direction:column;align-items:stretch;gap:var(--e5)}
  #panelCap .cap-maq{order:-1;width:100%;max-width:520px;margin-inline:auto}
}