/* =========================
   (A) BASE — preview + frontend
   Scope único: .tpf-viz-root
   ========================= */

.tpf-viz-root.tpf-viz-card{
  max-width: 800px;
  margin: 20px auto;
  padding: 22px 16px 18px; /* aire extra arriba */
  background:#fff;
  border-radius:10px;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color:#333;
}

/* Header: logo arriba, título abajo, centrados */
.tpf-viz-root .tpf-viz-header{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  margin:0 0 14px;
}
.tpf-viz-root .tpf-viz-header--stack{ flex-direction:column; }
.tpf-viz-root .tpf-logo img,
.tpf-viz-root .tpf-logo .tpf-logo__img{
  max-height:48px;
  width:auto;
  display:block;
  margin:0 auto;
}
.tpf-viz-root #tpf-preview-title,
.tpf-viz-root .tpf-viz-title{
  margin:0;
  line-height:1.2;
  font-size:22px;
  font-weight:700;
  color:#0a2540; /* cámbialo a rojo si quieres seguir probando */
  text-align:center;
}

/* ===== Meta del participante =====
   SIN línea propia; sólo aire.
   La línea entre meta y gráfico la pone #tpf-preview-viz */
.tpf-viz-root #tpf-preview-meta,
.tpf-viz-root .tpf-viz-meta{
  margin-top:2px;
  padding-bottom:12px;
  margin-bottom:0;         /* sin gap extra aquí */
  border-bottom:none !important;
}

/* ===== Contenedor de VIZ =====
   Coloca la línea que separa META → GRÁFICA */
.tpf-viz-root #tpf-preview-viz{
  border-top:1px solid #e6eef5 !important;  /* ← separador desde meta */
  padding-top:12px;
  margin-top:16px;                           /* aire desde meta */
}

/* ===== Identificación: estilo tipo PDF ===== */
.tpf-viz-root #tpf-preview-meta{
  margin: 0;
  padding: 0;
  border: 0 !important;
}

.tpf-ident{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #d1d5db;      /* línea superior fina */
}

.tpf-ident__title{
  font-weight: 700;
  color: #0a2540;
  padding: 6px 0 8px;
  border-bottom: 3px solid #0a2540;   /* regla azul gruesa */
  margin-bottom: 10px;
}

/* —— GRID en 2 columnas: izquierda flexible, derecha ajustada —— */
.tpf-ident__grid{
  display: grid;                       /* ← te faltaba esto */
  grid-template-columns: 1fr auto;     /* izquierda ocupa todo, derecha al ancho */
  column-gap: 32px;
  align-items: start;
  border-bottom: 0 !important;         /* sin línea extra abajo */
  padding-bottom: 0;
  margin-bottom: 0;
}

.tpf-ident__col--right{
  justify-self: end;                   /* pega al borde derecho */
  text-align: right;
}

/* filas dentro de cada columna */
.tpf-field{ display: flex; gap: 6px; margin: 4px 0; }
.tpf-label{ font-weight: 700; color: #111827; }
.tpf-value{ color: #111827; }

/* Responsive: 1 columna en móvil */
@media (max-width: 720px){
  .tpf-ident__grid{
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
  .tpf-ident__col--right{
    justify-self: start;
    text-align: left;
  }
}
/* Separador GRÁFICA → TABLA sobre el wrapper de la tabla */
.tpf-viz-root #tpf-preview-viz .tpf-table-wrap{
  border-top:1px solid #e6eef5 !important;
  padding-top:12px;
  margin-top:16px;
}

/* Gráfica (canvas/div): sin bordes, sólo aire inferior */
.tpf-viz-root #tpf-preview-viz canvas,
.tpf-viz-root .tpf-viz-canvas,
.tpf-viz-root canvas.grafica-resultado{
  display:block;
  width:100%;
  height:100%;                 /* ← clave: ocupa la altura del wrapper */
  margin:0;                    /* el margen lo da el wrapper */
  padding:0;
  border:0;
  box-shadow:none;
  background:#fff;             /* útil para exportar */
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
}

/* Wrapper de la gráfica: controla la altura visible */
.tpf-viz-root #tpf-preview-viz .tpf-chart-wrap,
.tpf-viz-root .tpf-resultados-container .tpf-chart-wrap{
  height: 480px !important;     /* ajusta a 420–560 a gusto */
  max-height: none !important;  /* asegura que nada lo limite */
  position: relative;
  margin-bottom: 16px;
}

/* Canvas ocupa todo el wrapper */
.tpf-viz-root .tpf-chart-wrap > canvas{
  display:block;
  width: 100% !important;
  height: 100% !important;      /* clave */
  margin:0; padding:0; border:0; box-shadow:none; background:#fff;
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
}

/* ===== Tabla =====
   Línea superior para separar GRÁFICA → TABLA */
.tpf-viz-root #tpf-preview-viz table,
.tpf-viz-root .tpf-viz-table,
.tpf-viz-root .tabla-resultados{
  margin-top:10px;                           /* aire desde gráfica */
  padding-top:10px;
}

/* Tabla “bonita” por defecto (cuando usamos .tabla-resultados) */
.tpf-viz-root .tabla-resultados{
  width:100%;
  border-collapse:collapse;
  margin-bottom:20px;
  font-size:.93rem;
  background:#fff;
  border-radius:6px;
  box-shadow:0 4px 8px rgba(0,0,0,.06);
  overflow:hidden;
}
.tpf-viz-root .tabla-resultados thead tr{
  background:#001f3f;
  color:#fff;
}
.tpf-viz-root .tabla-resultados th,
.tpf-viz-root .tabla-resultados td{
  padding:4px 6px;
  line-height:1.2;
  text-align:center;
  font-size:.93rem;
  border-bottom:1px solid #e0e0e0;
}
.tpf-viz-root .tabla-resultados th:first-child,
.tpf-viz-root .tabla-resultados td:first-child{
  text-align:left;
}
.tpf-viz-root .tabla-resultados tbody tr:nth-child(even){ background:#f9f9f9; }
.tpf-viz-root .tabla-resultados tbody tr:hover{ background:#e8f4fc; }

/* Fila final acentuada (opcional si tu tabla la genera) */
.tpf-viz-root .tpf-tabla tbody tr:last-child{
  font-weight:600;
  background:transparent;
}
.tpf-viz-root .tpf-tabla tbody tr:last-child td:first-child{
  position:relative; padding-left:14px;
}
.tpf-viz-root .tpf-tabla tbody tr:last-child td:first-child::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:6px; height:60%; background:#8B0000; border-radius:3px;
}

/* Resumen interpretativo */
.tpf-viz-root .tpf-resumen{
  margin-top:12px;
  padding:12px 14px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:8px;
}
.tpf-viz-root .tpf-resumen h3{
  font-size:18px; line-height:1.2; margin-bottom:8px;
}

/* Logo sobre el FORM (si se usa en frontend) */
.tpf-viz-root .tpf-logo-form{
  text-align:center; margin:0 0 12px;
}
.tpf-viz-root .tpf-logo-form img{
  max-height:36px; width:auto; display:block; margin:0 auto;
}

/* Botón de descarga PDF (si lo usas en la vista real) */
.tpf-viz-root .btn-container{ text-align:center; margin-top:30px; }
.tpf-viz-root .btn-descargar-pdf{
  display:inline-block; background:#8B0000; color:#fff; font-weight:700;
  padding:10px 16px; border-radius:6px; text-decoration:none;
  transition:background .3s, transform .2s; font-size:15px;
  box-shadow:0 4px 6px rgba(0,0,0,.2); margin-top:25px;
}
.tpf-viz-root .btn-descargar-pdf:hover{
  background:#660000; transform:translateY(-2px);
}

/* Ajuste específico dona IPDE (si aplica) */
.tpf-viz-root #graficaIPDE.grafica-resultado{
  max-width:500px; max-height:300px; margin:20px auto; display:block;
}

/* =========================
   (B) SOLO PREVIEW (admin)
   ========================= */

#tpf-preview-modal #tpf-preview-body{
  width:100%;
  padding:16px;
  box-sizing:border-box;
  display:block !important;
}
#tpf-preview-modal #tpf-preview-body > *{
  grid-column:1 / -1 !important;
}

/* Layout 2 columnas en preview */
#tpf-preview-modal #tpf-preview-shell{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:start;
}

/* Izquierda: “aplana” grids heredados del admin */
#tpf-preview-modal #tpf-pane-left .tpf-form,
#tpf-preview-modal #tpf-pane-left .tpf-section,
#tpf-preview-modal #tpf-pane-left .tpf-card,
#tpf-preview-modal #tpf-pane-left #tpf-preview-form{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}
#tpf-preview-modal #tpf-pane-left #tpf-preview-form *{ max-width:none !important; }
#tpf-preview-modal #tpf-pane-left .tpf-form,
#tpf-preview-modal #tpf-pane-left .tpf-form [class*="grid"],
#tpf-preview-modal #tpf-pane-left .tpf-form [class*="layout"]{
  grid-template-columns:1fr !important;
  column-gap:0 !important;
}
#tpf-preview-modal #tpf-pane-left .tpf-form [style*="grid-column"],
#tpf-preview-modal #tpf-pane-left .tpf-form [class*="col-"]{
  grid-column:auto !important;
}

/* Derecha: asegurar ancho completo para la viz */
#tpf-preview-modal #tpf-pane-right .tpf-viz-card,
#tpf-preview-modal #tpf-pane-right #tpf-preview-viz{
  width:100%;
}

/* Evitar que algún overflow/grid del admin “saque” el logo/form del contenedor */
#tpf-preview-modal #tpf-pane-left,
#tpf-preview-modal #tpf-pane-left .tpf-section{
  overflow:visible !important;
}

/* Contenedor de resultados en columna (por si no existe ya) */
.tpf-viz-root .tpf-resultados-container{
  display:flex;
  flex-direction:column;
}


/* título */
.tpf-scope .tpf-viz-title { 
  font: 600 2rem/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  margin: 1rem auto 1.25rem;
  text-align: center;
}

/* tabla/gráfica dentro del contenedor genérico del renderer */
.tpf-scope .tpf-viz table { /* o el selector real que uses */
  width: 100%;
  border-collapse: collapse;
}

/* resumen interpretativo */
.tpf-scope .tpf-summary { margin-top: 1.5rem; }
/* Si prefieres sin aspect-ratio y basado en viewport, usa esto en vez del bloque anterior:
.tpf-viz-root .tpf-resultados-container .tpf-chart-wrap{
  height: clamp(160px, 28vw, 260px);
}
.tpf-viz-root .tpf-resultados-container .tpf-chart-wrap canvas{
  width: 100% !important;
  height: 100% !important;
}
*/
/* Responsive: apilar header y pasar a 1 columna */
@media (max-width:780px){
  .tpf-viz-root .tpf-viz-header{ gap:8px; }
  #tpf-preview-modal #tpf-preview-shell{ grid-template-columns:1fr; }
}


/* === Layout del card (más aire) === */
.tpf-viz-root.tpf-viz-card,
.entry-content .tpf-viz-root.tpf-viz-card,
.ast-container .tpf-viz-root.tpf-viz-card {
  max-width: 1100px !important;
  width: 100% !important;

  /* margen externo del card */
  margin: 40px auto 48px !important;          /* ↑ top, ↓ bottom más generosos */

  /* padding interno del card */
  padding: 40px 40px 26px !important;         /* ← → laterales + arriba/abajo */

  /* opcional: sombra un poco más suave */
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border-radius: 12px;
}

/* aire entre secciones internas */
.tpf-viz-root .tpf-viz-header { margin-bottom: 20px; }
.tpf-viz-root #tpf-preview-viz { margin-top: 20px; padding-top: 14px; }
.tpf-viz-root .tpf-resumen { margin-top: 18px; }

/* === ALERTAS: modo compacto, sin título ni cajas === */

/* oculta el título */
.tpf-alerts > h3 { display:none !important; }

/* contenedor sin márgenes grandes */
.tpf-alerts{
  margin: 8px 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;           /* separación mínima entre filas */
}

/* cada alerta como fila simple, sin borde/caja */
.tpf-alert{
  display:flex;
  align-items:baseline;
  gap: 10px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  line-height: 1.3;   /* interlineado más cerrado */
}

/* etiqueta (nombre de la escala) y texto */
.tpf-alert__head{ margin: 0 !important; }
.tpf-alert__head strong{
  font-size: 14px;    /* más pequeño */
  font-weight: 600;
  color: #111827;     /* gris oscuro */
}
.tpf-alert__body{
  font-size: 14px;
  color: #4b5563;     /* gris medio */
}
.tpf-alert__body p{ margin: 0; }

/* chapa de severidad, pequeña y redondeada */
.tpf-alert__badge{
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fff;
}
.tpf-alert--info     .tpf-alert__badge{ background:#3b82f6; }
.tpf-alert--warning  .tpf-alert__badge{ background:#f59e0b; }
.tpf-alert--critical .tpf-alert__badge{ background:#dc2626; }

/* separador sutil entre filas (opcional) */
.tpf-alert + .tpf-alert{
  border-top: 1px dashed #e5e7eb;   /* quítalo si no lo quieres */
  padding-top: 6px;
}

/* en móvil aún un poco más compacto */
@media (max-width: 640px){
  .tpf-alert__head strong,
  .tpf-alert__body{ font-size: 13px; }
  .tpf-alert__badge{ font-size: 10px; padding: 1px 6px; }
}