/* ==========================================================================
   Gestión de privacidad · Organigrama de DPOs
   Scope: #gpdpo · BEM gd_ · Figma 2T2024 5424:188 (565) y 5425:794 (290)
   ========================================================================== */

@font-face{font-family:'IberPangea Text';src:url(/wcorp/gc/prod/es_ES/estaticos/gestion-privacidad-organigrama-dpo/fonts/IberPangeaText-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea Text';src:url(/wcorp/gc/prod/es_ES/estaticos/gestion-privacidad-organigrama-dpo/fonts/IberPangeaText-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea Text';src:url(/wcorp/gc/prod/es_ES/estaticos/gestion-privacidad-organigrama-dpo/fonts/IberPangeaText-SmBold.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;}

/* ===== Tokens (get_variable_defs 5424:188) ===== */
#gpdpo{
  --gd-green:#007F33;    /* Green 1 — raíz y separador discontinuo */
  --gd-green4:#5BD38C;   /* Green 4 — IEI y sus 5 países */
  --gd-forest:#00402A;   /* Iberdrola Forest — textos, bordes y conectores */
  --gd-sand:#FFF5EC;     /* Iberdrola Sand — pastillas de áreas */
  --gd-sand1:#FFFEFF;    /* Sand 1 — relleno de las pastillas con borde */
  --gd-sand3:#D8CFC7;    /* Sand 3 — borde de la tarjeta */
  /* Patrón 12/12 de Figma. `border-style:dashed` NO sirve: la longitud del guion la decide el
     navegador (Chrome ~3x el grosor) y no hay propiedad para pedirla. Con el gradiente sí. */
  --gd-disc:repeating-linear-gradient(to right,var(--gd-green) 0 12px,transparent 12px 24px);
}

/* ===== Tarjeta ===== */
#gpdpo{
  container-type:inline-size; container-name:gd;
  width:100%; max-width:980px; margin:0 auto;   /* sin margen vertical: la pieza se incrusta */
  box-sizing:border-box; overflow:hidden; position:relative; text-align:left;
  background:#FFFFFF; border:1px solid var(--gd-sand3); border-radius:15px;
  font-family:'IberPangea Text',Arial,sans-serif; font-size:15px; line-height:normal;
  color:var(--gd-forest);
}

/* ===== Blindaje frente al CSS del sitio anfitrión (Liferay) =====
   La HERENCIA pierde contra cualquier declaración del theme. Ver docs/VALIDACION.md. */
#gpdpo *,#gpdpo *::before,#gpdpo *::after{box-sizing:border-box;}
#gpdpo *{
  color:inherit; font:inherit; letter-spacing:inherit;
  text-align:inherit; text-transform:inherit; white-space:inherit;
  text-indent:0; text-decoration:none; margin:0; padding:0;
}
#gpdpo *::before,#gpdpo *::after{
  margin:0; padding:0; text-indent:0; letter-spacing:inherit; text-transform:inherit;
}
#gpdpo ul,#gpdpo ol,#gpdpo li{list-style:none;}
#gpdpo li::marker{content:none;}
#gpdpo li::before{content:'' !important; display:none !important; margin:0 !important;}
#gpdpo img,#gpdpo svg{display:block; max-width:100%;}

/* El padding va en un wrapper interno: `@container` no reestila el propio contenedor (lección 011). */
/* 23 y no 24: en Figma el borde de la tarjeta se dibuja POR DENTRO, así que sus 24 de padding ya
   incluyen el píxel del borde (24-1). Sin esto la pieza sale 2 px más ancha y 2 más alta. */
#gpdpo .gd_inner{padding:23px; display:flex; flex-direction:column; gap:24px;}

/* ===== Árbol ===== */
#gpdpo .gd_tree{display:flex; flex-direction:column; align-items:center;}

#gpdpo .gd_root{
  background:var(--gd-green); color:var(--gd-sand1);
  padding:12px 17px; border-radius:89px;
  font-weight:600; font-size:16px; line-height:20px; white-space:nowrap;
}
/* Conectores: todo CSS, así se estiran solos con la rejilla (D04). */
#gpdpo .gd_stem{width:1px; height:16px; background:var(--gd-green);}

/* Rejilla de 6 columnas que sirve a los DOS tamaños con el mismo marcado:
   · 565 → span 2/2/2 en la fila 1 y span 3/3 en la 2. Con gap 8 y 517 de contenido, la columna mide
     79,5 → span 2 = 167 y span 3 = 254,5: los dos valores exactos de Figma.
   · 290 → 2 columnas (ver la container query), y el flujo automático coloca España/Scottish arriba y
     Avangrid/Neoenergía debajo, que es justo el emparejamiento del diseño móvil. */
#gpdpo .gd_rows{
  width:100%; display:grid; gap:8px;
  grid-template-columns:repeat(6,minmax(0,1fr));
}
#gpdpo .gd_pill{
  grid-column:span 2; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:var(--gd-sand1); border-radius:89px; padding:8px 16px;
  /* borde por `inset`: en Figma va por dentro y un borde real restaría ancho al texto */
  box-shadow:inset 0 0 0 1px var(--gd-forest);
  font-weight:500; font-size:15px; line-height:normal; text-align:center;
}
#gpdpo .gd_pill--neo,#gpdpo .gd_pill--iei{grid-column:span 3;}
#gpdpo .gd_pill--iei{background:var(--gd-green4);}
/* Unión horizontal entre hermanos: ocupa el hueco de 8 px de la rejilla, así sigue a las cajas. */
#gpdpo .gd_pill:nth-child(1)::after,
#gpdpo .gd_pill:nth-child(2)::after,
#gpdpo .gd_pill--neo::after{
  content:''; position:absolute; left:100%; top:50%; width:8px; height:1px;
  background:var(--gd-forest);
}
/* Puente y montantes verticales: solo existen en 290 */
#gpdpo .gd_bridge{display:none;}
#gpdpo .gd_country::after{display:none;}

/* ===== Horquilla de 5 ramas =====
   La barra va de centro a centro de las columnas 1 y 5: con 5 columnas iguales y gap 8, eso es
   `100% - anchoDeColumna` = 80% + 6,4px. Anclada a la rejilla, sigue a las cajas al ensanchar. */
#gpdpo .gd_branch{width:100%; display:flex; flex-direction:column; align-items:center;}
#gpdpo .gd_bracket{
  position:relative; width:calc(80% + 6.4px); height:17px;
  border-bottom:1px solid var(--gd-forest);
}
/* Montante: sube desde la barra hasta la caja de IEI. 87,4 % es la posición de Figma. */
#gpdpo .gd_bracket::before{
  content:''; position:absolute; top:0; bottom:0; left:87.4%;
  width:1px; background:var(--gd-forest);
}
#gpdpo .gd_countries{width:100%; display:flex; gap:8px; justify-content:center;}
#gpdpo .gd_country{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center;}
#gpdpo .gd_stub{width:1px; height:16px; background:var(--gd-forest);}
#gpdpo .gd_cbox{
  width:100%; background:var(--gd-green4); border-radius:8px; padding:12px 17px;
  font-weight:600; font-size:14px; line-height:normal; text-align:center;
}

/* ===== Bloque de áreas ===== */
/* Rejilla de 12 columnas: con gap 8 y 517 de contenido la columna mide 35,75, así que
   span 4 = 167 (fila de 3) y span 3 = 123,25 (fila de 4). Los dos valores exactos de Figma, y las
   dos filas salen de UNA sola rejilla. En 290 pasa a 2 columnas (span 6) y el orden cambia con `order`. */
#gpdpo .gd_areas{
  /* la discontinua va como fondo de 1 px arriba, no como `border-top` (ver --gd-disc) */
  background:var(--gd-disc) top left/100% 1px no-repeat;
  padding-top:24px;
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:8px; row-gap:7px;
}
#gpdpo .gd_a1,#gpdpo .gd_a2,#gpdpo .gd_a3{grid-column:span 4;}
#gpdpo .gd_a4,#gpdpo .gd_a5,#gpdpo .gd_a6,#gpdpo .gd_a7{grid-column:span 3;}
#gpdpo .gd_apill{
  min-width:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--gd-sand); border-radius:8px; padding:12px 10px;
  font-weight:400; font-size:14px; line-height:normal; text-align:center;
  /* Figma deja el texto en una línea aunque se salga un pelo del padding (p.ej. "Auditoría Interna"). */
  white-space:nowrap;
}

/* ==========================================================================
   Móvil (Figma 290) — un solo punto de cambio
   Otra maquetación: el árbol pasa a 2 columnas con puente horizontal, los 5 países a lista vertical
   con tronco lateral, y hasta el ORDEN de las pastillas de áreas cambia.
   Umbral 478 y no 480: `container-type:inline-size` mide el content-box y el borde de la tarjeta
   hace que el contenedor mida 2 px menos que el viewport.
   ========================================================================== */
@container gd (max-width:478px){
  #gpdpo .gd_inner{padding:23px 15px; gap:16px;}   /* Figma 24/16 menos el borde */

  /* --- Árbol: 2 columnas --- */
  #gpdpo .gd_rows{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:16px;}
  #gpdpo .gd_pill{grid-column:span 1; padding:12px 10px;}
  #gpdpo .gd_pill--neo{grid-column:span 1;}
  #gpdpo .gd_pill--iei{grid-column:span 2;}
  /* fuera las uniones horizontales del 565 */
  #gpdpo .gd_pill:nth-child(1)::after,
  #gpdpo .gd_pill:nth-child(2)::after,
  #gpdpo .gd_pill--neo::after{content:none;}
  /* montantes: 16 por encima de las 4 pastillas y 16 por debajo de las de la 2ª fila */
  #gpdpo .gd_pill:nth-child(-n+4)::before{
    content:''; position:absolute; left:50%; bottom:100%; width:1px; height:16px;
    background:var(--gd-forest);
  }
  #gpdpo .gd_pill:nth-child(3)::after,
  #gpdpo .gd_pill:nth-child(4)::after{
    content:''; position:absolute; left:50%; top:100%; width:1px; height:16px;
    background:var(--gd-forest);
  }
  /* puente horizontal de centro a centro de las dos columnas */
  #gpdpo .gd_bridge{
    display:block; width:calc(50% + 4px); height:1px; background:var(--gd-forest);
  }
  #gpdpo .gd_rows{margin-top:16px;}   /* hueco para los montantes de la 1ª fila */

  /* --- Los 5 países: lista vertical con tronco lateral --- */
  /* en 290 el bloque de países es HERMANO del árbol en Figma, con el hueco de 16 de la tarjeta;
     aquí va anidado, así que el hueco se pone a mano (y es por donde sube el tronco) */
  #gpdpo .gd_branch{width:75.58%; align-self:flex-start; margin-top:16px;}
  #gpdpo .gd_bracket{display:none;}
  #gpdpo .gd_countries{flex-direction:column; gap:7px;}
  #gpdpo .gd_country{
    position:relative; flex-direction:row-reverse; align-items:center; width:100%;
  }
  /* padding 23 y no 10: Figma fija el texto a 122 dentro de una caja de 168, que es lo que fuerza a
     los cinco países a dos líneas y deja las filas iguales. 168-2*23 = 122. */
  #gpdpo .gd_cbox{flex:0 0 86.15%; width:auto; padding:12px 23px;}   /* 168 de 195 */
  #gpdpo .gd_stub{flex:1 1 0; width:auto; height:1px;}
  /* Tronco: cada fila pinta su tramo (y el hueco siguiente); la primera sube hasta la caja de IEI y
     la última muere en su centro. Así no depende del alto de fila, que cambia con el texto. */
  #gpdpo .gd_country::after{
    content:''; display:block; position:absolute; right:0; top:0; bottom:-7px;
    width:1px; background:var(--gd-forest);
  }
  #gpdpo .gd_country:first-child::after{top:-16px;}
  #gpdpo .gd_country:last-child::after{bottom:50%;}

  /* --- Áreas: 2 columnas y OTRO orden --- */
  #gpdpo .gd_areas{grid-template-columns:repeat(2,minmax(0,1fr)); padding-top:16px;}
  /* aquí el texto SÍ envuelve (a 565 va en una línea): es lo que da las filas de 60 de Figma */
  #gpdpo .gd_apill{grid-column:span 1; white-space:normal;}
  #gpdpo .gd_a3{grid-column:span 2; font-size:15px;}   /* Servicios Jurídicos, a ancho completo */
  #gpdpo .gd_a4{order:1;} #gpdpo .gd_a5{order:2;}
  #gpdpo .gd_a6{order:3;} #gpdpo .gd_a7{order:4;}
  #gpdpo .gd_a1{order:5;} #gpdpo .gd_a2{order:6;} #gpdpo .gd_a3{order:7;}
}