/* Paradigma Timeline — frontend.

   SISTEMA DE DISEÑO
   Tipografía: tres niveles (año, texto, detalle). Cada nivel es una variable y un control en Elementor.
     · Año     → número del año
     · Texto   → nombre, fecha, institución, título de modalidad, cabecera de columnas, botones y desplegables
     · Detalle → detalle de modalidad, insignia de tipo, contadores, etiquetas, «Limpiar filtros», «N ediciones»
   Peso: negrita fija en nombre, fecha, título de modalidad y cabecera de columnas.
   Color: dos grupos (etiquetas y filtros / encabezado y filas) más un color por tipo.
   Todo está acotado a .ptl. */

.ptl{
  --ptl-navy:#16304f;   /* acento por defecto */
  --ptl-muted:#5c6776;  /* texto de contadores y etiquetas (fuera de las tarjetas) */
  --ptl-rule:#d8dde5;
  --ptl-mist:#f3f5f8;
  --ptl-radius:6px;
  --ptl-badge-px:10px;  /* relleno lateral de la insignia; también cuánto sobresale a la izquierda */

  --ptl-fs-year:34px;
  --ptl-fs-text:15px;
  --ptl-fs-detail:13px;

  box-sizing:border-box;
  width:100%;
  color:#1d2631;
  font-family:inherit;
  font-size:var(--ptl-fs-text);
  line-height:1.45;
}
.ptl *,.ptl *::before,.ptl *::after{box-sizing:border-box}
.ptl h3,.ptl p,.ptl ul{margin:0}
.ptl ul{padding:0;list-style:none}
.ptl [hidden]{display:none!important}

/* ── Negrita fija en los textos destacados ──
   !important para que el peso elegido en la tipografía de cada nivel solo afecte al texto normal. */
.ptl .ptl-name,.ptl .ptl-date,.ptl .ptl-mod strong,.ptl .ptl-colhead,.ptl .ptl-ed-n{font-weight:700!important}

/* ── Controles: botones de tipo, desplegables, contador ── */
.ptl-controls{margin-bottom:18px}
.ptl-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ptl .ptl-chip{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;margin:0;border:1px solid var(--ptl-chip-border,var(--ptl-rule));border-radius:var(--ptl-ctl-r,999px);
  background:var(--ptl-chip-bg,#fff);color:var(--ptl-chip-ink,#1d2631);
  font:inherit;font-size:var(--ptl-fs-text);line-height:1.2;text-transform:none;letter-spacing:0;box-shadow:none;
  transition:background .15s,border-color .15s,color .15s;
}
.ptl .ptl-chip:hover{border-color:var(--ptl-chip-active-bg,var(--ptl-navy));background:var(--ptl-mist);color:var(--ptl-chip-ink,#1d2631)}
.ptl .ptl-chip i{width:9px;height:9px;border-radius:50%;background:var(--c,var(--ptl-navy));display:inline-block}
.ptl .ptl-chip b{font-weight:400;opacity:.7;font-size:var(--ptl-fs-detail)}
.ptl .ptl-chip[aria-pressed="true"]{background:var(--ptl-chip-active-bg,var(--ptl-navy));border-color:var(--ptl-chip-active-bg,var(--ptl-navy));color:var(--ptl-chip-active-ink,#fff)}
.ptl .ptl-chip[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--ptl-chip-active-ink,#fff)}

.ptl-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.ptl-field{display:flex;flex-direction:column;gap:4px;margin:0;min-width:0}
.ptl-field>span{font-size:var(--ptl-fs-detail);line-height:1.4;color:var(--ptl-muted)}
.ptl .ptl-field select{
  width:100%;height:42px;margin:0;padding:0 12px;
  border:1px solid var(--ptl-chip-border,var(--ptl-rule));border-radius:var(--ptl-ctl-r,var(--ptl-radius));
  background-color:var(--ptl-chip-bg,#fff);color:var(--ptl-chip-ink,#1d2631);
  font:inherit;font-size:var(--ptl-fs-text);box-shadow:none;
}
.ptl .ptl-field select:focus{outline:2px solid var(--ptl-year-ink,var(--ptl-navy));outline-offset:1px}

.ptl-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px;margin:12px 0 14px}
.ptl .ptl-count{color:var(--ptl-muted);font-size:var(--ptl-fs-detail);line-height:1.4}
.ptl .ptl-reset{
  appearance:none;-webkit-appearance:none;cursor:pointer;margin:0;padding:6px 12px;
  border:1px solid currentColor;border-radius:var(--ptl-ctl-r,var(--ptl-radius));
  background:transparent;color:var(--ptl-muted);
  font:inherit;font-size:var(--ptl-fs-detail);line-height:1.2;text-transform:none;letter-spacing:0;box-shadow:none;
  transition:background .15s;
}
.ptl .ptl-reset:hover{background:rgba(127,127,127,.18)}

/* ── Encabezado y filas: mismo grupo de colores, misma caja ── */
.ptl-row,.ptl-colhead{
  /* Dentro de estas cajas los textos usan sus propias variables, para no heredar
     los colores pensados para el fondo de la página. */
  --ptl-ink:var(--ptl-row-ink,#1d2631);
  --ptl-muted:var(--ptl-row-muted,#5c6776);
  --ptl-navy:var(--ptl-row-accent,#16304f);
  color:var(--ptl-ink);
  background:var(--ptl-row-bg,#fff);
  border-radius:var(--ptl-card-r,var(--ptl-radius));
}
.ptl-row{
  border:1px solid var(--ptl-row-border,var(--ptl-rule));
  border-left:4px solid var(--c,var(--ptl-navy));
  margin-bottom:8px;
}
.ptl-colhead{
  border:1px solid var(--ptl-row-border,var(--ptl-rule));
  border-left:4px solid var(--ptl-row-border,var(--ptl-rule));
  margin-bottom:12px;
  padding:10px 16px;
  font-size:var(--ptl-fs-text);line-height:1.4;
}
.ptl-grid,.ptl-colhead{display:grid;grid-template-columns:150px 150px minmax(0,1.7fr) minmax(0,1.3fr) minmax(0,1fr);column-gap:20px}
.ptl-row .ptl-grid{padding:14px 16px;align-items:start}

/* ── Años ── */
.ptl .ptl-year{display:flex;align-items:center;gap:14px;margin:0;padding:28px 0 10px;font-size:inherit;line-height:1;text-transform:none;letter-spacing:0}
.ptl .ptl-list>.ptl-year:first-child{padding-top:14px}
.ptl .ptl-year-n{font-family:Georgia,"Times New Roman",serif;font-size:var(--ptl-fs-year);line-height:1;font-weight:700;color:var(--ptl-year-ink,var(--ptl-navy))}
.ptl .ptl-year-c{font-size:var(--ptl-fs-detail);line-height:1;color:var(--ptl-muted);white-space:nowrap}
.ptl .ptl-year::after{content:"";flex:1;min-width:16px;height:1px;background:var(--ptl-year-line,var(--ptl-rule))}

/* ── Contenido de la fila ── */
.ptl .ptl-date{color:var(--ptl-navy);font-size:var(--ptl-fs-text);line-height:1.4}
.ptl .ptl-type span{
  /* El texto de la insignia se alinea con el resto del contenido: la cápsula sobresale por la izquierda. */
  display:inline-block;margin-left:calc(var(--ptl-badge-px) * -1);
  padding:3px var(--ptl-badge-px);border-radius:999px;
  font-size:var(--ptl-fs-detail);line-height:1.3;font-weight:600;
  background:var(--ptl-mist);color:var(--c,var(--ptl-navy));
}
.ptl .ptl-name{margin:0;font-size:var(--ptl-fs-text);line-height:1.35;color:var(--ptl-ink);font-family:inherit;text-transform:none;letter-spacing:0}
.ptl .ptl-org{color:var(--ptl-ink);font-size:var(--ptl-fs-text);line-height:1.45}
.ptl .ptl-mod strong{display:block;font-size:var(--ptl-fs-text);line-height:1.4}
.ptl .ptl-mod span{display:block;color:var(--ptl-muted);font-size:var(--ptl-fs-detail);line-height:1.4}
.ptl .ptl-lbl{display:none}

/* ── Programas con varias ediciones ── */
.ptl .ptl-toggle{
  appearance:none;-webkit-appearance:none;cursor:pointer;margin:8px 0 0;padding:5px 11px;
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--ptl-navy);border-radius:var(--ptl-ctl-r,var(--ptl-radius));background:transparent;color:var(--ptl-navy);
  font:inherit;font-size:var(--ptl-fs-detail);font-weight:600;line-height:1.2;text-transform:none;letter-spacing:0;box-shadow:none;
}
.ptl .ptl-toggle:hover{background:rgba(127,127,127,.18)}
.ptl .ptl-toggle svg{width:12px;height:12px;transition:transform .2s}
.ptl .ptl-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.ptl-eds{margin:0;padding:4px 16px 14px;border-top:1px dashed var(--ptl-row-border,var(--ptl-rule))}
.ptl-ed{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1.2fr);column-gap:20px;padding:9px 0;border-bottom:1px solid var(--ptl-row-border,var(--ptl-rule));font-size:var(--ptl-fs-text);line-height:1.4}
.ptl-ed:last-child{border-bottom:0}
.ptl .ptl-ed-n{color:var(--ptl-navy)}
.ptl .ptl-ed-d{color:var(--ptl-muted);font-weight:400;font-size:var(--ptl-fs-detail)}
.ptl .ptl-ed-m{color:var(--ptl-muted);font-size:var(--ptl-fs-detail)}

/* ── Borde uniforme (sin franja de color del tipo) ── */
.ptl.ptl--plain-border .ptl-row,
.ptl.ptl--plain-border .ptl-colhead{border-left-width:1px;border-left-color:var(--ptl-row-border,var(--ptl-rule))}

/* ── Efecto cristal: encabezado y filas translúcidos con borde luminoso ──
   Relleno neutro (solo blanco y negro translúcidos): aclara u oscurece sin cambiar el tono del fondo. */
.ptl.ptl--glass{
  --ptl-row-ink:#fff;
  --ptl-row-muted:rgba(255,255,255,.74);
  --ptl-row-accent:#fff;
  --ptl-muted:rgba(255,255,255,.85);
  --ptl-year-ink:#fff;
  --ptl-year-line:rgba(255,255,255,.6);
}
.ptl.ptl--glass .ptl-row,
.ptl.ptl--glass .ptl-colhead{
  border:1px solid var(--ptl-row-border,rgba(111,220,255,.55));
  border-radius:var(--ptl-card-r,22px);
  background:var(--ptl-row-bg,linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 55%,rgba(0,0,0,.22)));
  -webkit-backdrop-filter:blur(var(--ptl-glass-blur,14px));
  backdrop-filter:blur(var(--ptl-glass-blur,14px));
  box-shadow:0 0 22px rgba(111,220,255,.12),inset 0 1px 0 rgba(255,255,255,.22);
}
.ptl.ptl--glass .ptl-row .ptl-grid{padding:18px 22px}
.ptl.ptl--glass .ptl-colhead{padding:13px 22px}
.ptl.ptl--glass .ptl-type span{
  /* Insignia con el color real del tipo, sin mezclarlo con negro */
  color:#fff;background:var(--c,#16304f);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
}
.ptl.ptl--glass .ptl-reset{background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ptl.ptl--glass .ptl-reset:hover{background:rgba(255,255,255,.22)}
.ptl.ptl--glass .ptl-eds{border-top-color:rgba(255,255,255,.25)}
.ptl.ptl--glass .ptl-ed{border-bottom-color:rgba(255,255,255,.14)}
.ptl.ptl--glass .ptl-toggle{border-color:rgba(255,255,255,.7)}

/* Mezcla de colores (solo en navegadores que la soportan): tinte del tipo en la insignia
   y brillo del color elegido, con intensidad configurable */
@supports (color:color-mix(in srgb,red 50%,blue)){
  .ptl .ptl-type span{background:color-mix(in srgb,var(--c,var(--ptl-navy)) 12%,#fff)}
  .ptl .ptl-reset:hover,.ptl .ptl-toggle:hover{background:color-mix(in srgb,currentColor 16%,transparent)}
  .ptl.ptl--glass .ptl-row,
  .ptl.ptl--glass .ptl-colhead{
    border-color:var(--ptl-row-border,color-mix(in srgb,var(--ptl-glass-glow,#6fdcff) 55%,transparent));
    box-shadow:0 0 22px color-mix(in srgb,var(--ptl-glass-glow,#6fdcff) var(--ptl-glass-glow-pct,12%),transparent),inset 0 1px 0 rgba(255,255,255,.22);
  }
  .ptl.ptl--glass .ptl-reset:hover{background:rgba(255,255,255,.22)}
}

.ptl .ptl-empty{padding:28px 16px;text-align:center;color:var(--ptl-muted);border:1px dashed var(--ptl-rule);border-radius:var(--ptl-radius)}
.ptl-noscript li{padding:6px 0;border-bottom:1px solid var(--ptl-rule)}

.ptl :focus-visible{outline:2px solid var(--ptl-year-ink,var(--ptl-navy));outline-offset:2px}

/* ── Tablet y móvil: cada registro se convierte en ficha ──
   Orden: insignia de tipo, fecha y el resto. */
@media (max-width:900px){
  .ptl-colhead{display:none}
  .ptl-bar{margin:10px 0 0}
  .ptl .ptl-year{padding-top:18px}
  .ptl .ptl-list>.ptl-year:first-child{padding-top:10px}
  .ptl-row .ptl-grid{grid-template-columns:1fr;row-gap:8px;padding:16px 18px}
  .ptl-row .ptl-grid>div:nth-child(2){order:-1}
  .ptl .ptl-lbl{display:block;font-size:var(--ptl-fs-detail);line-height:1.4;color:var(--ptl-muted);margin-bottom:1px}
  .ptl-ed{grid-template-columns:1fr;row-gap:2px}
  .ptl.ptl--glass .ptl-row .ptl-grid{padding:18px 22px}
}
@media (max-width:520px){
  .ptl{--ptl-fs-year:28px}
  .ptl-fields{grid-template-columns:1fr}
  .ptl .ptl-year{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .ptl *{transition:none!important}
}