/*
 * Fichas de publicacion: los estilos que comparten el informe y los perfiles.
 *
 * Pareja de fichas.js. Todo lo que hay aqui lo pinta ese renderizador; lo que
 * envuelve al listado (cabecera, resumen, filtros, graficos) es de cada pagina y
 * NO vive aqui.
 *
 * --ficha-col es el unico ajuste previsto: el ancho minimo de columna de las cajas
 * de metricas. El informe usa el valor por defecto (140px); los perfiles, que meten
 * el listado en una columna mas estrecha, lo bajan.
 *
 * Igual que fichas.js, build_site.py lo incrusta en index_p.html y ademas lo deja
 * suelto en output/site/fichas.css para los perfiles.
 */

.card { background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); margin-bottom: 24px; padding: 24px; border: 1px solid #e5e7eb; }
.pub-title { font-size: 1.25rem; font-weight: 700; color: #1f2937; margin-bottom: 8px; line-height: 1.4; }
.pub-meta { color: #6b7280; font-size: .95rem; margin-bottom: 16px; }
.pub-meta a { color: #2563eb; text-decoration: none; font-family: monospace; }
.pub-meta a:hover { text-decoration: underline; }
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--ficha-col, 140px), 1fr)); gap: 10px; margin-top: 15px; padding-top: 15px; border-top: 1px solid #b2f5ea; }
/* Columna flexible: las cajas ya se estiran a la altura de la fila (son celdas de
   grid), y asi el contenido puede empujarse al fondo en lugar de quedar flotando
   a media altura segun cuanto texto tenga cada una. */
.metric-box { background: #f0fdfa; border-radius: 6px; padding: 10px 10px 5px; border: 1px solid #b2f5ea; display: flex; flex-direction: column; }
.metric-header { display: flex; align-items: center; gap: 5px; font-weight: 600; margin-bottom: 8px; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.metric-main { display: flex; align-items: center; }
.metric-value { font-size: 1.2em; font-weight: bold; }
.metric-side { display: flex; flex-direction: column; font-size: .8em; line-height: 1.2; margin-left: 10px; color: #555; }
/* Cada indicador es una fila de dos columnas: insignia | texto. El texto envuelve
   dentro de SU columna, de modo que el numero cae bajo la palabra y no bajo el
   cuartil. Etiqueta y numero no se parten por dentro. */
.metric-side > div { display: flex; align-items: baseline; gap: 4px; margin-bottom: 3px; }
.metric-side > div > .q { flex: 0 0 auto; }
.ind-text { min-width: 0; }
.ind-label { white-space: nowrap; }
.ind-value { white-space: nowrap; }
.q { color: white; padding: 1px 4px; border-radius: 3px; font-weight: bold; }
.q1 { background: #28a745 } .q2 { background: #17a2b8 } .q3 { background: #ffc107 } .q4 { background: #dc3545 }
.details-link { font-size: .8em; text-decoration: none; }
/* Sin esto, el bloque del enlace se estira y la grafica no llega al fondo */
.metric-box > div { flex: 0 0 auto; }
.badge-slot { text-align: center; margin-top: 10px; min-height: 60px; }
.badge-slot.sin-widget { min-height: 0; padding-top: 6px; }
.sin-datos { font-size: .78rem; color: #9ca3af; font-style: italic; }
/* El widget de PlumX se inserta como elemento inline y no se deja centrar por el
   contenedor; estas dos reglas venian de la plantilla original. */
.plumx-plum-print-popup { display: inline-block !important; margin: 0 !important; }
.plum-print-container { margin: 0 !important; padding: 0 !important; }
/* PlumX reserva un bloque de 120x120 (.plx-wrapping-print-link en cdn.plu.mx/popup.css)
   y centra su insignia dentro, asi que queda mas baja que las de Altmetric y
   Dimensions. Subimos la ranura para compensar ese bloque reservado. Este es el unico
   numero a tocar si hay que afinar la altura. */
.badge-slot.plumx-slot { margin-top: -8px; }
.gs-link { margin-left: 12px; color: #4285F4; font-size: 1.1rem; vertical-align: middle; display: inline-block; text-decoration: none; transition: transform .2s; }
.gs-link:hover { transform: scale(1.2); }
.gs-count { font-weight: 800; font-size: 1.1rem; margin-right: 2px; }
/* margin-top:auto absorbe el espacio sobrante y deja la grafica pegada al fondo,
   de modo que todas las de una misma fila quedan alineadas entre si. */
.metric-box .sparkline { margin-top: auto; padding-top: 6px; border-top: 1px dashed #cbe9e4; display: flex; align-items: center; gap: 6px; }
.sparkline { margin-top: 8px; padding-top: 6px; border-top: 1px dashed #cbe9e4; display: flex; align-items: center; gap: 6px; }
/* Junto al DOI la evolucion va en linea, sin separador ni salto */
.pub-meta .sparkline { display: inline-flex; margin: 0 0 0 10px; padding: 0; border: 0; vertical-align: middle; }
.sparkline svg { display: block; flex-shrink: 0; }
.spark-delta { font-weight: 700; font-size: .78rem; }
/* La ficha aun no hidratada reserva altura para que el scroll no salte */
.card.pending .metrics-grid { min-height: 118px; }

@media (max-width: 768px) {
  .metrics-grid { grid-template-columns: repeat(2, 1fr) }
  .card { padding: 15px }
  .pub-title { font-size: 1.1rem }
}
@media (max-width: 480px) {
  .metrics-grid { grid-template-columns: 1fr }
}