/* Archivo Vivo: credencial del directorio y ficha de perfil.
   Se carga después de style.css y manda sobre sus reglas del archivo. */

/* ---------- Credencial ----------
   Mismo lenguaje que las tarjetas de nota: panel del sitio, sello sobre la
   foto, filete rojo y pie en mono. Usa los colores del tema, así que en
   modo claro se invierte sola. */
.archivo-editorial{--tm-card:var(--panel);--tm-ink:var(--paper);--tm-ink-soft:var(--paper-soft);--tm-ink-mute:var(--concrete);--tm-rule:var(--line);--tm-red:var(--signal);--tm-media:var(--bg)}
.archivo-editorial .tm-card__inner{transition:transform .65s cubic-bezier(.25,.8,.25,1)}
.archivo-editorial .tm-card__face{border:1px solid var(--line);border-radius:3px;box-shadow:none;overflow:hidden;transition:border-color .25s}
.archivo-editorial .tm-card__face--front{padding:0}
.archivo-editorial .tm-card__media{border-radius:0}
.archivo-editorial .tm-card__media::after{display:none}
.archivo-editorial .tm-card__img{filter:none;opacity:1;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.archivo-editorial[data-photo-position="center"] .tm-card__img,
.archivo-editorial[data-photo-position="top"] .tm-card__img,
.archivo-editorial[data-photo-position="bottom"] .tm-card__img{object-fit:cover}
.archivo-editorial[data-photo-position="completa"] .tm-card__media{background:#fff}
.archivo-editorial[data-photo-position="completa"] .tm-card__img{padding:0;object-fit:contain}
/* El sello de las notas; le gana a ".tm-card__media > img" de style.css. */
.archivo-editorial .tm-card__media>.marca{inset:auto;top:14px;left:14px;width:38px;height:38px}
.archivo-editorial[data-photo-position="completa"] .tm-card__media>.marca{filter:invert(1);opacity:.55}
.archivo-editorial .tm-card__id{margin:0;padding:18px 18px 16px}
.tm-card__filete{display:block;width:26px;height:2px;background:var(--signal);margin-bottom:13px;transition:width .35s cubic-bezier(.2,.8,.2,1)}
.archivo-editorial .tm-card__name{font:800 clamp(20px,7.6cqw,26px)/1.1 var(--sans);letter-spacing:-.015em;text-transform:uppercase;color:var(--paper);margin:0}
.tm-card__meta{display:flex;flex-wrap:wrap;gap:2px 0;margin-top:10px;font:10px/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.archivo-editorial .tm-card__cat,.archivo-editorial .tm-card__place{font:inherit;letter-spacing:inherit;margin:0}
.archivo-editorial .tm-card__cat{color:var(--signal)}
.archivo-editorial .tm-card__place{color:var(--concrete)}
.archivo-editorial .tm-card__place::before{content:"·";margin:0 8px}
.archivo-editorial .tm-card__face--front>.tm-card__rule{margin:0}
.archivo-editorial .tm-card__foot{margin:0;padding:11px 18px}
.archivo-editorial .tm-card__acc{font-size:10px;letter-spacing:.07em;color:var(--concrete)}
.archivo-editorial .tm-card__btn{font-size:10px;font-weight:400;letter-spacing:.07em;color:var(--concrete);transition:color .25s}
.archivo-editorial .tm-card__btn svg{width:11px;height:11px}
@media(hover:hover){
 .archivo-editorial:hover .tm-card__face{border-color:var(--line-strong);box-shadow:none}
 .archivo-editorial:hover .tm-card__img{transform:scale(1.05)}
 .archivo-editorial:hover .tm-card__filete{width:52px}
 .archivo-editorial:hover .tm-card__btn,.archivo-editorial .tm-card__btn:hover{color:var(--signal)}
}
.archivo-editorial:focus-within .tm-card__face{box-shadow:none;border-color:var(--signal)}

.archivo-editorial .tm-card__face--back .tm-card__facts,
.archivo-editorial .tm-card__face--back .tm-card__acc-label,
.archivo-editorial .tm-card__face--back .tm-card__acc-num,
.archivo-editorial .tm-card__face--back>.tm-card__rule{display:none}
.archivo-editorial .archivo-back-identidad span{color:var(--signal)}
.archivo-editorial .archivo-back-identidad strong{color:var(--paper)}
.archivo-editorial .tm-card__connections-label{font:10px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--concrete);margin:22px 0 0}
.archivo-editorial .tm-card__link{color:var(--paper)}
.archivo-editorial .tm-card__link:hover,.archivo-editorial .tm-card__link:focus-visible{color:var(--signal)}

@media(min-width:681px){
 .archivo-editorial .tm-card__face--front{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(118px,auto) 1px auto}
 .archivo-editorial .tm-card__media{grid-row:1;width:100%;height:100%;min-height:0;aspect-ratio:auto;border:0}
 .archivo-editorial .tm-card__id{grid-row:2;min-width:0}
 .archivo-editorial .tm-card__face--front>.tm-card__spacer{display:none}
 .archivo-editorial .tm-card__face--front>.tm-card__rule{grid-row:3}
 .archivo-editorial .tm-card__foot{grid-row:4}

 .archivo-editorial .tm-card__face--back{padding:22px;display:flex;flex-direction:column}
 .archivo-editorial .archivo-back-identidad{display:flex;flex-direction:column;gap:12px;padding-bottom:20px;border-bottom:1px solid var(--line)}
 .archivo-editorial .archivo-back-identidad span{font:10px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.07em}
 .archivo-editorial .archivo-back-identidad strong{font:800 clamp(20px,8.4cqw,28px)/1.1 var(--sans);letter-spacing:-.015em;text-transform:uppercase;overflow-wrap:normal;word-break:normal;text-wrap:balance}
 .archivo-editorial .tm-card__links{display:grid;grid-template-columns:minmax(0,1fr);margin:6px 0 16px}
 /* Con muchos enlaces pasan a dos columnas para no salirse del carnet. */
 .archivo-editorial .tm-card__links:has(.tm-card__link:nth-child(5)){grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
 .archivo-editorial .tm-card__link{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:12px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;font-size:11px;letter-spacing:.06em;background:transparent}
 .archivo-editorial .tm-card__face--back>.tm-card__spacer{flex:1;min-height:12px}
 .archivo-editorial .tm-card__cta{justify-content:space-between;background:transparent;color:var(--paper);border:1px solid var(--line-strong);border-radius:3px;padding:15px 16px;font-size:10px}
 .archivo-editorial .tm-card__cta:hover,.archivo-editorial .tm-card__cta:focus-visible{background:var(--signal);border-color:var(--signal);color:#fff}
 .archivo-editorial .tm-card__back-foot{margin-top:14px}

 /* Carnet angosto (riel de portada, tablet): más compacto. */
 @container (max-width:330px){
  .archivo-editorial .tm-card__face--back{padding:18px}
  .archivo-editorial .archivo-back-identidad{gap:10px;padding-bottom:16px}
  .archivo-editorial .tm-card__connections-label{margin-top:18px}
  .archivo-editorial .tm-card__links{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
  .archivo-editorial .tm-card__link{min-height:40px;padding:10px 0}
  .archivo-editorial .tm-card__id{padding:16px 16px 14px}
  .archivo-editorial .tm-card__foot{padding:10px 16px}
 }
}

@media(max-width:680px){
 .archivo-directorio .archivo-grid .archivo-editorial{height:170px}
 :is(.archivo-grid,.archivo-riel) .archivo-editorial:has(.tm-card__link:nth-child(n+5)){height:190px}
 :is(.archivo-grid,.archivo-riel) .archivo-editorial .tm-card__face--front{padding:0;grid-template-columns:38% minmax(0,1fr);grid-template-rows:1fr 1px auto;gap:0 14px}
 :is(.archivo-grid,.archivo-riel) .archivo-editorial .tm-card__media{grid-row:1/-1}
 :is(.archivo-grid,.archivo-riel) .archivo-editorial .tm-card__media>.marca{top:10px;left:10px;width:28px;height:28px}
 :is(.archivo-grid,.archivo-riel) .archivo-editorial .tm-card__id{grid-column:2;grid-row:1;align-self:center;padding:14px 14px 12px 0}
 :is(.archivo-grid,.archivo-riel) .archivo-editorial .tm-card__filete{margin-bottom:10px}
 :is(.archivo-grid,.archivo-riel) .archivo-editorial .tm-card__name{font-size:18px}
 :is(.archivo-grid,.archivo-riel) .archivo-editorial .tm-card__meta{margin-top:8px;font-size:9px;letter-spacing:.05em}
 :is(.archivo-grid,.archivo-riel) .archivo-editorial .tm-card__place::before{margin:0 6px}
 :is(.archivo-grid,.archivo-riel) .archivo-editorial .tm-card__face--front>.tm-card__spacer{display:none}
 :is(.archivo-grid,.archivo-riel) .archivo-editorial .tm-card__face--front>.tm-card__rule{grid-column:2;grid-row:2;margin:0 14px 0 0}
 :is(.archivo-grid,.archivo-riel) .archivo-editorial .tm-card__foot{grid-column:2;grid-row:3;margin:0 14px 0 0;padding:10px 0}
 :is(.archivo-grid,.archivo-riel) .archivo-editorial .tm-card__acc{font-size:9px;letter-spacing:.05em}
 .archivo-editorial .tm-card__connections-label{display:none}
}

/* ---------- Directorio ---------- */
.archivo-directorio .pagina-head{padding-top:36px;padding-bottom:20px;margin-bottom:20px}
.archivo-directorio .archivo-indice{margin-bottom:18px}
.archivo-directorio .archivo-grid{gap:28px}
/* Bajo 780px tres columnas dejan el carnet demasiado angosto. */
@media(min-width:681px) and (max-width:780px){.archivo-directorio .archivo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:719px){
 .archivo-directorio .pagina-head{padding-top:24px}
 .archivo-directorio .archivo-grid{gap:16px}
}

/* ---------- Ficha de perfil ----------
   Dos columnas: el carnet a la izquierda (foto, enlaces, número) y la
   lectura a la derecha. Mismo panel, sello, filete y pie que la credencial. */
.perfil-contexto{max-width:1024px;width:calc(100% - 56px);margin:28px auto 0;padding:14px 0;display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}
.ficha{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:64px;align-items:stretch;max-width:1080px;margin:36px auto 0;padding:0 28px}
.ficha-label{display:block;font:10px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--concrete);margin:0}

/* Carnet: se estira hasta el final de la columna de lectura. La foto
   queda en 4/5 y el alto que sobra lo toma la zona de enlaces, con el
   pie siempre abajo. */
.ficha-lado{display:flex}
.ficha-carnet{flex:1;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.ficha-foto{position:relative;flex:none;aspect-ratio:4/5;overflow:hidden;background:var(--bg)}
.ficha-foto picture{display:block;width:100%;height:100%}
.ficha-foto .perfil-detail-hero-img{display:block;width:100%;height:100%;object-fit:cover}
.ficha-foto .marca{top:14px;left:14px;width:32px;height:32px}
.ficha[data-photo-position="completa"] .ficha-foto{background:#fff}
.ficha[data-photo-position="completa"] .ficha-foto .perfil-detail-hero-img{object-fit:contain;padding:24px}
.ficha[data-photo-position="completa"] .ficha-foto .marca{filter:invert(1);opacity:.55}
.ficha-foto--vacia{display:grid;place-items:center}
.ficha-iniciales{font:800 72px/1 var(--sans);color:var(--concrete);opacity:.4}
.ficha-enlaces{flex:1;display:flex;flex-direction:column;padding:20px 20px 0}
.ficha-links{display:flex;flex-direction:column;margin:6px 0 14px}
.ficha-links a{display:flex;align-items:center;justify-content:space-between;min-height:44px;border-bottom:1px solid var(--line);font:12px var(--mono);letter-spacing:.04em;color:var(--paper);text-decoration:none;transition:color .2s}
.ficha-links a:last-child{border-bottom:0}
.ficha-links a::after{content:"↗";color:var(--concrete);transition:color .2s}
.ficha-links a:is(:hover,:focus-visible),.ficha-links a:hover::after{color:var(--signal)}
.ficha-pie{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin:auto -20px 0;padding:10px 20px;border-top:1px solid var(--line);font:10px/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--concrete)}
.ficha-pie b{font-weight:400;color:var(--paper)}
.ficha-pie-datos{display:flex;flex-direction:column;gap:2px}
.ficha-share{gap:4px}
.ficha-share :is(a,.as-copy){width:28px;height:28px;border:0;background:none}
.ficha-share :is(a,.as-copy):hover{background:none}

/* Lectura */
.ficha-id h1{font:800 clamp(40px,5.2vw,68px)/1 var(--sans);letter-spacing:-.04em;text-transform:uppercase;color:var(--paper);margin:0;overflow-wrap:anywhere}
.ficha-id .tm-card__filete{margin-bottom:22px}
.ficha-meta{display:flex;flex-wrap:wrap;margin-top:16px;font:11px/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--signal)}
.ficha-ciudad{color:var(--concrete)}
.ficha-ciudad::before{content:"·";margin:0 8px}
.ficha-intro{margin:26px 0 0;max-width:34ch;font:300 23px/1.45 var(--sans);letter-spacing:-.01em;color:var(--paper)}
/* Subtítulos con el mismo estilo de sección del sitio (título, línea, enlace). */
.ficha-franja{padding:0 0 20px}
.ficha-texto{margin-top:48px;max-width:640px}
.ficha-texto p{font:400 17px/1.8 var(--sans);color:var(--paper-soft);margin:0 0 20px}
.ficha-texto>h2,.ficha-texto>h3{font:700 21px/1.25 var(--sans);color:var(--paper);margin:30px 0 12px}
.ficha-texto a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.ficha-texto a:hover{color:var(--signal)}

/* Música en un panel como el del carnet; el reproductor visual de
   SoundCloud muestra la portada y no el recuadro blanco. */
.ficha .perfil-musica{margin-top:44px;max-width:640px}
.ficha-musica-panel{background:var(--panel);border:1px solid var(--line);border-radius:3px;overflow:hidden}
/* Reproductor propio (ficha.js): portada, título, barras de avance y lista. */
.ficha-sc{position:relative}
.ficha-sc.is-propio .ficha-player{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.ficha-sc-main{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:18px;padding:16px}
.ficha-sc-art{width:96px;aspect-ratio:1;border-radius:2px;overflow:hidden;background:var(--bg)}
.ficha-sc-art img{display:block;width:100%;height:100%;object-fit:cover}
.ficha-sc-info{min-width:0}
.ficha-sc-estado{display:block;font:10px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--concrete)}
.ficha-sc.is-sonando .ficha-sc-estado{color:var(--signal)}
.ficha-sc-titulo{display:block;margin-top:4px;font:700 17px/1.3 var(--sans);color:var(--paper);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ficha-sc-titulo:hover{color:var(--signal)}
.ficha-sc-barra{position:relative;height:26px;margin-top:12px;cursor:pointer;touch-action:manipulation}
.ficha-sc-barra:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.ficha-sc-barras{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px;pointer-events:none}
.ficha-sc-barras i{flex:1 1 0;min-width:1px;background:var(--line-strong)}
.ficha-sc-barras--llena{clip-path:inset(0 100% 0 0)}
.ficha-sc-barras--llena i{background:var(--signal)}
.ficha-sc-tiempos{display:flex;justify-content:space-between;margin-top:6px;font:10px/1.5 var(--mono);color:var(--concrete)}
.ficha-sc-play{display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:50%;background:var(--signal);color:#fff;cursor:pointer;transition:transform .2s}
.ficha-sc-play:hover{transform:scale(1.06)}
.ficha-sc-play:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.ficha-sc-play svg{width:20px;height:20px}
.ficha-sc-ico-pausa,.ficha-sc.is-sonando .ficha-sc-ico-play{display:none}
.ficha-sc.is-sonando .ficha-sc-ico-pausa{display:block}
.ficha-sc-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ficha-sc-lista li+li{border-top:1px solid var(--line)}
.ficha-sc-lista button{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 16px;border:0;background:none;color:var(--paper-soft);font:12px var(--mono);letter-spacing:.02em;text-align:left;cursor:pointer;transition:color .2s,background .2s}
.ficha-sc-lista button:hover{color:var(--paper);background:rgba(255,255,255,.03)}
.ficha-sc-lista button.is-activo{color:var(--signal)}
.ficha-sc-n,.ficha-sc-d{color:var(--concrete)}
.ficha-sc-lista button.is-activo .ficha-sc-n{color:var(--signal)}
.ficha-sc-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ficha-sc-lista button.is-bloqueado{cursor:default;opacity:.45;background:none}
@media(max-width:480px){
 .ficha-sc-main{grid-template-columns:64px minmax(0,1fr) auto;gap:12px;padding:14px}
 .ficha-sc-art{width:64px}
 .ficha-sc-titulo{font-size:15px}
 .ficha-sc-play{width:44px;height:44px}
 .ficha-sc-lista button{padding:0 14px}
}
.ficha-player{display:block;border:0}
.ficha-video{position:relative;aspect-ratio:16/9}
.ficha-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ficha .perfil-seleccion{margin:16px}

@media(max-width:860px){
 .ficha{display:flex;flex-direction:column;align-items:stretch;gap:0;margin-top:20px;padding:0 20px}
 /* Se desarman las columnas para ordenar: foto, nombre, enlaces, texto, música. */
 .ficha-lado,.ficha-carnet,.ficha-cuerpo{display:contents}
 .ficha-foto{order:1;aspect-ratio:3/2;border-radius:3px}
 .ficha-id{order:2;margin-top:24px}
 /* En celular los enlaces van sueltos, como botones en dos columnas, sin la caja del carnet. */
 .ficha-enlaces{order:3;margin-top:24px;padding:0}
 .ficha-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 0}
 .ficha-links a,.ficha-links a:last-child{padding:0 12px;border:1px solid var(--line);border-radius:3px;background:var(--panel)}
 .ficha-pie{margin:14px 0 0;padding:12px 0 0}
 .ficha-texto{order:4;margin-top:36px}
 .ficha .perfil-musica{order:5;margin-top:32px}
 .ficha-id h1{font-size:clamp(34px,10vw,44px)}
 .ficha-intro{font-size:19px;margin-top:18px}
}
@media(max-width:719px){
 .perfil-contexto{width:calc(100% - 40px);padding:12px 0;margin-top:12px;align-items:center}
}

/* ---------- Más del archivo ---------- */
.perfil-mas{max-width:1080px;margin:0 auto;padding:64px 28px 48px;background:none}
.perfil-mas .franja{padding-top:0}
.perfil-mas .archivo-riel{cursor:auto}
@media(max-width:719px){
 .perfil-mas{padding:44px 20px 32px}
}

@media(prefers-reduced-motion:reduce){
 .archivo-editorial .tm-card__inner,.archivo-editorial .tm-card__img,.tm-card__filete,.ficha-sc-play{transition:none}
}