/* ------------------------------------------------------------------
   portalpublico.css
   Estilos del portal público (PortalPublico.aspx).
   Independiente del resto de hojas de la web privada: todas las clases
   van prefijadas con "pp-" y no se carga ninguna otra hoja en la página.

   Maquetas de referencia:
     - Cabecera_Pie.pdf (cabecera y pie)
     - WireframesCEPCantabria_CITED_Elisa.pdf (pie ampliado)

   Los tamaños proceden de medir las maquetas sobre un diseño de 1920 px.
   Cabecera y pie se reducen en bloque con --pp-escala; el texto pequeño
   NO escala y se mantiene en --pp-texto-fijo por legibilidad.
   ------------------------------------------------------------------ */

/* ============================================================
   TIPOGRAFIA
   Titillium Web servida desde este mismo dominio. Antes se pedia a
   fonts.googleapis.com, lo que enviaba la direccion IP de cada visitante
   a un tercero sin que mediara consentimiento.
   Licencia SIL Open Font License 1.1, que permite alojarla.
   Ficheros en Tema/plataforma/fuentes/, 8 woff2, 75,7 KB en total.
   Se conservan los unicode-range del original: el navegador solo baja el
   subconjunto latin-ext cuando el texto lo necesita.
   ============================================================ */
/* latin-ext */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(fuentes/titillium-web-300-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(fuentes/titillium-web-300-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fuentes/titillium-web-400-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fuentes/titillium-web-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(fuentes/titillium-web-600-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(fuentes/titillium-web-600-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(fuentes/titillium-web-700-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(fuentes/titillium-web-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ 1. Variables ============ */

.pp-portal {
    /* Colores corporativos (muestreados de las maquetas) */
    --pp-azul: #618FB1;
    --pp-magenta: #E5107F;
    --pp-lima: #C7D30E;
    --pp-naranja: #F9B10D;
    --pp-azul-cited: #557EA2;

    /* Grises */
    --pp-fondo-aviso: #F8F8F8;
    --pp-fondo-barra: #EEEEEE;
    --pp-fondo-pie: #EDEDEC;
    --pp-fondo-legal: #FAFAFA;
    --pp-separador: #FFFFFF;

    /* Texto */
    --pp-texto: #1D1D1B;
    --pp-texto-medio: #575756;
    --pp-texto-suave: #706F6F;

    /* Factor de reducción respecto a la maqueta: 1 = tamaño original.
       Afecta a alturas, logotipos, tipos grandes y rellenos. */
    --pp-escala: .65;

    /* Texto pequeño: fijo, nunca escala */
    --pp-texto-fijo: 15px;

    /* Métricas */
    --pp-margen: clamp(16px, calc(3.65vw * var(--pp-escala)), calc(70px * var(--pp-escala)));
    --pp-alto-aviso: clamp(26px, calc(2.97vw * var(--pp-escala)), calc(57px * var(--pp-escala)));
    --pp-alto-barra: clamp(52px, calc(10.47vw * var(--pp-escala)), calc(201px * var(--pp-escala)));
    --pp-alto-franja: 4px;
    --pp-alto-franja-noticias: 6px;
    --pp-alto-noticia: clamp(240px, calc(25.2vw * var(--pp-escala)), calc(484px * var(--pp-escala)));
    --pp-margen-noticia: clamp(20px, calc(20.1vw * var(--pp-escala)), calc(387px * var(--pp-escala)));
    --pp-ancho-celda: clamp(76px, calc(9.9vw * var(--pp-escala)), calc(190px * var(--pp-escala)));

    /* Tipografía */
    --pp-fuente: 'Titillium Web', 'Segoe UI', 'Trebuchet MS', Roboto, Arial, sans-serif;
}

/* ============ 2. Base ============ */

html.pp-html,
body.pp-portal {
    margin: 0;
    padding: 0;
}

.pp-portal {
    font-family: var(--pp-fuente);
    color: var(--pp-texto);
    background-color: #FFFFFF;
    -webkit-text-size-adjust: 100%;
}

.pp-portal *,
.pp-portal *::before,
.pp-portal *::after {
    box-sizing: border-box;
}

.pp-portal img {
    max-width: 100%;
    border: 0;
}

.pp-portal a {
    color: inherit;
    text-decoration: none;
}

.pp-portal ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp-portal p {
    margin: 0;
}

/* Foco visible: la página es de uso público, sin autenticación */
.pp-portal a:focus-visible,
.pp-portal button:focus-visible {
    outline: 2px solid var(--pp-azul);
    outline-offset: 2px;
}

.pp-contenedor {
    padding-left: var(--pp-margen);
    padding-right: var(--pp-margen);
}

/* Texto sólo para lectores de pantalla */
.pp-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============ 3. Cabecera ============ */

/* Queda siempre visible arriba. Con position: sticky no hace falta
   compensar el hueco en el contenido, como si ocurriria con fixed. */
.pp-cabecera {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--pp-fondo-barra);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .10);
}

/* 3.1 Franja superior */
.pp-cabecera__aviso {
    display: flex;
    align-items: center;
    min-height: var(--pp-alto-aviso);
    background-color: var(--pp-fondo-aviso);
    color: var(--pp-texto-suave);
    font-size: clamp(13px, calc(1.42vw * var(--pp-escala)), calc(27px * var(--pp-escala)));
    font-weight: 300;
    line-height: 1.2;
}

/* 3.2 Barra principal */
.pp-cabecera__barra {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: var(--pp-alto-barra);
    padding-left: var(--pp-margen);
    background-color: var(--pp-fondo-barra);
}

.pp-cabecera__marcas {
    display: flex;
    align-items: center;
    gap: clamp(14px, calc(3.4vw * var(--pp-escala)), calc(66px * var(--pp-escala)));
    padding: 6px 0;
    margin-right: auto;
}

/* El h1 solo aporta significado: no debe alterar la fila de logotipos */
.pp-cabecera__titulo {
    display: flex;
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.pp-cabecera__logo {
    display: block;
}

.pp-cabecera__logo img {
    display: block;
    width: auto;
    height: clamp(28px, calc(6.58vw * var(--pp-escala)), calc(126px * var(--pp-escala)));
}

.pp-cabecera__logo--cited img {
    height: clamp(33px, calc(8.02vw * var(--pp-escala)), calc(154px * var(--pp-escala)));
}

/* 3.3 Navegación */
.pp-nav {
    position: relative;
    display: flex;
    align-items: stretch;
    align-self: stretch;
}

/* Franja cuatricolor bajo la navegación */
.pp-nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--pp-alto-franja);
    background-image: linear-gradient(to right,
        var(--pp-azul) 0, var(--pp-azul) 25%,
        var(--pp-magenta) 25%, var(--pp-magenta) 50%,
        var(--pp-lima) 50%, var(--pp-lima) 75%,
        var(--pp-naranja) 75%, var(--pp-naranja) 100%);
}

.pp-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, calc(0.6vw * var(--pp-escala)), calc(12px * var(--pp-escala)));
    width: var(--pp-ancho-celda);
    padding: clamp(6px, calc(1vw * var(--pp-escala)), calc(20px * var(--pp-escala)))
             clamp(4px, 0.6vw, 12px)
             calc(var(--pp-alto-franja) + clamp(6px, calc(1.2vw * var(--pp-escala)), calc(24px * var(--pp-escala))));
    border-left: 2px solid var(--pp-separador);
    font-size: var(--pp-texto-fijo);
    font-weight: 400;
    line-height: 1.1;
    text-align: center;
    transition: background-color .15s ease-in-out;
}

.pp-nav__item:first-child {
    border-left: 0;
    width: auto;
    min-width: var(--pp-ancho-celda);
    padding-left: clamp(12px, calc(2.4vw * var(--pp-escala)), calc(46px * var(--pp-escala)));
    padding-right: clamp(12px, calc(2.4vw * var(--pp-escala)), calc(46px * var(--pp-escala)));
}

.pp-nav__item:hover,
.pp-nav__item:focus {
    background-color: #E4E4E4;
}

.pp-nav__item img {
    display: block;
    width: auto;
    height: clamp(20px, calc(3.02vw * var(--pp-escala)), calc(58px * var(--pp-escala)));
}

.pp-nav__item--educantabria img {
    height: clamp(24px, calc(4.5vw * var(--pp-escala)), calc(87px * var(--pp-escala)));
}

/* 3.4 Botón de menú (sólo móvil) */
.pp-cabecera__boton {
    display: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    padding: 0;
    margin-left: auto;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--pp-separador);
    cursor: pointer;
}

.pp-cabecera__barras,
.pp-cabecera__barras::before,
.pp-cabecera__barras::after {
    display: block;
    width: 24px;
    height: 3px;
    background-color: var(--pp-texto);
}

.pp-cabecera__barras {
    position: relative;
}

.pp-cabecera__barras::before,
.pp-cabecera__barras::after {
    content: "";
    position: absolute;
    left: 0;
}

.pp-cabecera__barras::before { top: -8px; }
.pp-cabecera__barras::after  { top: 8px; }

/* ============ 4. Contenido ============ */

/* Enlace para saltar la cabecera. Solo se ve cuando recibe el foco, que es
   cuando sirve de algo. Va fijo para que aparezca aunque la pagina este
   desplazada, y por encima de la cabecera, que es pegajosa. */
.pp-salto {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 200;
    padding: 10px 20px;
    border-radius: 8px;
    background-color: var(--pp-magenta);
    color: #FFFFFF;
    font-size: var(--pp-texto-fijo);
    text-decoration: none;
    transform: translateY(-200%);
}

.pp-salto:focus {
    transform: none;
}

/* El destino del salto recibe el foco por programa; no se le pinta cerco.
   El desplazamiento se detiene por debajo de la cabecera, que es pegajosa. */
.pp-principal:focus {
    outline: none;
}

.pp-principal {
    scroll-margin-top: calc(var(--pp-alto-aviso) + var(--pp-alto-barra));
}

.pp-principal {
    min-height: 30vh;
}

.pp-pendiente {
    padding: clamp(30px, 4vw, 70px) var(--pp-margen);
    color: var(--pp-texto-suave);
    font-size: clamp(14px, 1vw, 18px);
    text-align: center;
}

/* ------------ 4.1 Noticias (carrusel) ------------
   Maqueta 1920: banda de 484 px mas franja de color de 9,5 px.
   La ilustracion de fondo va al 26 % sobre blanco, como en la maqueta. */

.pp-noticias {
    position: relative;
    overflow: hidden;
    background-color: #FFFFFF;
    background-image: linear-gradient(rgba(255, 255, 255, .74), rgba(255, 255, 255, .74)),
                      url("../../images/publico/fondo-noticias-docencia.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-bottom: var(--pp-alto-franja-noticias) solid transparent;
    border-image: linear-gradient(to right,
                    var(--pp-azul) 0 25%,
                    var(--pp-magenta) 25% 50%,
                    var(--pp-lima) 50% 75%,
                    var(--pp-naranja) 75% 100%) 1;
}

.pp-noticias__pista {
    position: relative;
    display: grid;
}

/* Todas las noticias ocupan la misma celda; solo se ve la activa */
.pp-noticia {
    position: relative;
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    min-height: var(--pp-alto-noticia);
    padding: clamp(26px, calc(4.2vw * var(--pp-escala)), calc(80px * var(--pp-escala)))
             var(--pp-margen-noticia);
    visibility: hidden;
    opacity: 0;
    transition: opacity .45s ease;
}

.pp-noticia--activa {
    visibility: visible;
    opacity: 1;
}

.pp-noticia__interior {
    width: 100%;
}

/* Titulo secundario: 43 px en maqueta */
.pp-noticia__secundario {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 clamp(8px, calc(.9vw * var(--pp-escala)), calc(17px * var(--pp-escala)));
    color: var(--pp-texto-suave);
    font-size: clamp(var(--pp-texto-fijo), calc(2.24vw * var(--pp-escala)), calc(43px * var(--pp-escala)));
    font-weight: 300;
    line-height: 1.2;
}

/* La barra vertical de la maqueta se pinta siempre que haya texto,
   venga o no escrita en el titulo secundario. */
.pp-noticia__secundario span:not(:empty)::before {
    content: "| ";
}

.pp-noticia__icono {
    flex: 0 0 auto;
    width: auto;
    height: clamp(20px, calc(2.6vw * var(--pp-escala)), calc(50px * var(--pp-escala)));
}

/* Titulo principal: 84 px en maqueta */
.pp-noticia__principal {
    margin: 0;
    color: var(--pp-texto);
    font-size: clamp(28px, calc(4.4vw * var(--pp-escala)), calc(84px * var(--pp-escala)));
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    overflow-wrap: break-word;
}

.pp-noticia__accion {
    margin: clamp(18px, calc(2.5vw * var(--pp-escala)), calc(48px * var(--pp-escala))) 0 0;
    text-align: center;
}

.pp-noticia__contenido {
    display: none;
}

/* Boton "mas informacion" */
.pp-boton {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 10px clamp(18px, calc(1.6vw * var(--pp-escala)), calc(30px * var(--pp-escala)));
    min-height: clamp(38px, calc(3vw * var(--pp-escala)), calc(58px * var(--pp-escala)));
    border: 1px solid #FFFFFF;
    border-radius: 999px;
    background-color: rgba(199, 199, 199, .85);
    color: var(--pp-texto);
    font-family: inherit;
    font-size: var(--pp-texto-fijo);
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease;
}

.pp-boton:hover,
.pp-boton:focus {
    background-color: rgba(160, 160, 160, .9);
}

.pp-boton img {
    height: 13px;
}

/* Banda de resalte, esquina superior derecha */
.pp-noticia__resalte {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 26px 12px 23px;
    border-bottom-left-radius: 10px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1;
}

.pp-noticia__resalte img {
    height: 21px;
}

.pp-noticia__resalte--nueva   { background-color: var(--pp-lima); color: var(--pp-texto); }
.pp-noticia__resalte--aviso   { background-color: var(--pp-naranja); color: var(--pp-texto); }
.pp-noticia__resalte--urgente { background-color: var(--pp-magenta); }
.pp-noticia__resalte--info    { background-color: var(--pp-azul); }

/* Los iconos de NUEVA y AVISO se oscurecen para contrastar con su fondo claro */
.pp-noticia__resalte--nueva img,
.pp-noticia__resalte--aviso img {
    filter: brightness(0);
}

/* Flechas */
.pp-noticias__flecha {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: background-color .2s ease;
}

.pp-noticias__flecha:hover,
.pp-noticias__flecha:focus {
    background-color: rgba(255, 255, 255, .9);
}

.pp-noticias__flecha::before {
    content: "";
    position: absolute;
    top: 15px;
    width: 13px;
    height: 13px;
    border-top: 3px solid var(--pp-texto-medio);
    border-right: 3px solid var(--pp-texto-medio);
}

.pp-noticias__flecha--anterior          { left: 14px; }
.pp-noticias__flecha--anterior::before  { left: 18px; transform: rotate(-135deg); }
.pp-noticias__flecha--siguiente         { right: 14px; }
.pp-noticias__flecha--siguiente::before { right: 18px; transform: rotate(45deg); }

/* Puntos */
.pp-noticias__puntos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.pp-noticias__punto {
    width: 15px;
    height: 15px;
    padding: 0;
    border: 2px solid rgba(29, 29, 27, .45);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .55);
    cursor: pointer;
}

.pp-noticias__punto--activo {
    border-color: var(--pp-texto);
    background-color: var(--pp-texto);
}

/* Fila de mandos: los puntos y, a su derecha, el boton de parada. Se centra
   el conjunto, de modo que los puntos quedan unos pocos pixeles a la
   izquierda del centro; es imperceptible y aguanta cualquier ancho. */
.pp-noticias__mandos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(12px, calc(1.7vw * var(--pp-escala)), calc(33px * var(--pp-escala)));
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.pp-noticias__pausa {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    padding: 0;
    border: 2px solid rgba(29, 29, 27, .45);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .55);
    cursor: pointer;
}

.pp-noticias__pausa svg {
    width: 11px;
    height: 11px;
    fill: var(--pp-texto);
}

/* Se ve un icono u otro segun el estado */
.pp-noticias__icono-reproducir {
    display: none;
}

.pp-noticias__pausa--parado .pp-noticias__icono-pausa {
    display: none;
}

.pp-noticias__pausa--parado .pp-noticias__icono-reproducir {
    display: inline;
}

/* ------------ 4.2 Ventana emergente de la noticia ------------ */

.pp-portal--bloqueado {
    overflow: hidden;
}

.pp-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pp-modal[hidden] {
    display: none;
}

.pp-modal__fondo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(29, 29, 27, .65);
}

.pp-modal__caja {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 860px;
    max-height: calc(100vh - 40px);
    background-color: #FFFFFF;
    overflow: hidden;
    border: 1px solid rgba(29, 29, 27, .14);
    border-radius: 16px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .34);
}

/* La franja se dibuja como un elemento completo. border-image generaba
   artefactos cuadrados en algunas combinaciones de navegador y escala. */
.pp-modal__caja::before {
    content: "";
    flex: 0 0 var(--pp-alto-franja-noticias);
    background: linear-gradient(to right,
                    var(--pp-azul) 0 25%,
                    var(--pp-magenta) 25% 50%,
                    var(--pp-lima) 50% 75%,
                    var(--pp-naranja) 75% 100%);
}

.pp-modal__cabecera {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid #E3E3E1;
}

.pp-modal__titulo {
    flex: 1 1 auto;
    margin: 0;
    color: var(--pp-texto);
    font-size: clamp(19px, 2.2vw, 28px);
    font-weight: 600;
    line-height: 1.25;
    text-transform: uppercase;
    overflow-wrap: break-word;
}

.pp-modal__cerrar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #EEEEEE;
    color: var(--pp-texto);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.pp-modal__cerrar svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
}

.pp-modal__cerrar:hover,
.pp-modal__cerrar:focus {
    background-color: var(--pp-magenta);
    color: #FFFFFF;
}

.pp-modal__cuerpo {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 24px 26px;
    color: var(--pp-texto-medio);
    font-size: 16px;
    line-height: 1.6;
}

.pp-modal__cuerpo img,
.pp-modal__cuerpo iframe,
.pp-modal__cuerpo video {
    max-width: 100%;
    height: auto;
}

/* El texto de la noticia es HTML del editor: se le devuelve el formato
   normal que la hoja del portal anula para su propio maquetado. */
.pp-modal__cuerpo p {
    margin: 0 0 1em;
}

.pp-modal__cuerpo ul,
.pp-modal__cuerpo ol {
    margin: 0 0 1em;
    padding-left: 1.5em;
}

.pp-modal__cuerpo ul { list-style: disc outside; }
.pp-modal__cuerpo ol { list-style: decimal outside; }

.pp-modal__cuerpo li {
    margin-bottom: .3em;
}

.pp-modal__cuerpo > *:last-child {
    margin-bottom: 0;
}

.pp-modal__cuerpo table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.pp-modal__cuerpo a {
    color: var(--pp-magenta);
}

.pp-modal__cuerpo h1,
.pp-modal__cuerpo h2,
.pp-modal__cuerpo h3 {
    color: var(--pp-texto);
    line-height: 1.3;
}

/* Ficha del curso: conserva el contenido actual, pero agrupa cada dato y
   facilita recorrerlo visualmente. */
.pp-modal--curso .pp-modal__caja {
    max-width: 900px;
}

.pp-modal--curso .pp-modal__cabecera {
    background-color: #FAFAF9;
}

.pp-modal--curso .pp-modal__titulo {
    color: var(--pp-magenta);
    text-transform: none;
}

.pp-modal--curso .pp-modal__cuerpo {
    background-color: #F6F6F4;
}

.pp-modal--curso .pp-inscripcion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid #DEDEDB;
    border-radius: 12px;
    background-color: #FFFFFF;
}

.pp-modal--curso .pp-inscripcion__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 30px;
    border: 2px solid var(--pp-magenta);
    border-radius: 8px;
    background-color: var(--pp-magenta);
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
}

.pp-modal--curso .pp-inscripcion__boton:hover,
.pp-modal--curso .pp-inscripcion__boton:focus-visible {
    background-color: #FFFFFF;
    color: var(--pp-magenta);
}

.pp-modal--curso .pp-inscripcion p {
    flex: 1 1 240px;
    margin: 0;
}

.pp-modal--curso .pp-detalle {
    gap: 0;
    overflow: hidden;
    border: 1px solid #DEDEDB;
    border-radius: 12px;
    background-color: #FFFFFF;
}

.pp-modal--curso .pp-detalle dt,
.pp-modal--curso .pp-detalle dd {
    padding: 11px 14px;
    border-bottom: 1px solid #ECECEA;
}

.pp-modal--curso .pp-detalle dt:nth-of-type(even),
.pp-modal--curso .pp-detalle dd:nth-of-type(even) {
    background-color: #FAFAF9;
}

.pp-modal--curso .pp-detalle dt:last-of-type,
.pp-modal--curso .pp-detalle dd:last-of-type {
    border-bottom: 0;
}

/* ------------ 4.3 Mapa del centro dentro de la ventana ------------ */
/* Inscritos: mismos colores del portal, lectura cómoda y ancho adaptable. */
.pp-modal--curso .pp-inscripcion__boton--secundario,
.pp-inscritos__volver {
    padding: 12px 20px;
    border: 1px solid var(--pp-magenta);
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--pp-magenta);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.pp-modal--curso .pp-inscripcion__boton--secundario:hover,
.pp-inscritos__volver:hover {
    background: #F6F6F4;
    color: var(--pp-magenta);
}

.pp-modal--inscritos .pp-modal__caja { max-width: 900px; }
.pp-inscritos__tabla { overflow-x: auto; }
.pp-inscritos__tabla table { width: 100%; border-collapse: collapse; font-size: 15px; }
.pp-inscritos__tabla caption { padding: 10px 0; text-align: left; font-weight: 600; }
.pp-inscritos__tabla th,
.pp-inscritos__tabla td { padding: 12px; border-bottom: 1px solid #DEDEDB; text-align: left; }
.pp-inscritos__tabla th { background: #F6F6F4; }
.pp-inscritos__tabla tbody tr:nth-child(even) { background: #FAFAF9; }
.pp-inscritos__tabla td:last-child { white-space: nowrap; font-family: monospace; }


.pp-modal--mapa .pp-modal__cuerpo {
    padding: 0;
    overflow: hidden;
}

.pp-mapa iframe {
    display: block;
    width: 100%;
    height: min(60vh, 460px);
    border: 0;
}

.pp-mapa__pie {
    margin: 0;
    padding: 12px 24px;
    border-top: 1px solid #E3E3E1;
    font-size: 15px;
    text-align: right;
}

.pp-mapa__pie a {
    color: var(--pp-magenta);
}

/* ------------ 4.4 Oferta de actividades formativas ------------
   Maqueta 1920: tarjetas de 600 x 659 px en tres columnas con 27 px de
   separacion; imagen de 600 x 238; titulo 28,8; etiquetas y valores 18,9.
   Esta seccion NO usa --pp-escala: la tarjeta la dimensiona la rejilla,
   asi que su tipografia sigue el ancho de la ventana, no la reduccion
   aplicada a cabecera y pie. */

.pp-cursos {
    padding: clamp(28px, 3vw, 58px) var(--pp-margen) clamp(34px, 4vw, 70px);
    /* Al saltar aqui desde el paginador, la cabecera fija no tapa el titulo */
    scroll-margin-top: calc(var(--pp-alto-aviso) + var(--pp-alto-barra));
}

/* Cabecera de la seccion: titulo a la izquierda y conmutador de vista a la
   derecha, como en la maqueta. */
.pp-cursos__cabecera {
    max-width: 1920px;
    margin: 0 auto clamp(20px, 2.4vw, 46px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* La rejilla se detiene en el ancho de la maqueta: en pantallas muy anchas
   las tarjetas dejarian de parecerse a la maqueta y la imagen se escalaria
   por encima de su tamano real. */
.pp-cursos__titulo {
    margin: 0;
    color: var(--pp-texto);
    font-size: clamp(21px, 1.95vw, 37px);
    font-weight: 300;
    line-height: 1.2;
}

.pp-cursos__rejilla {
    max-width: 1920px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 1.4vw, 27px);
    align-items: start;
}

/* ---- Columna de controles: "ordenar por" arriba y las vistas debajo ---- */

.pp-cursos__controles {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

/* ---- Buscador de la oferta ----
   Mismo ancho y misma pastilla que el selector que tiene debajo, para
   que la columna de controles se lea como una sola pieza. */

.pp-buscador__envoltura {
    position: relative;
    z-index: 70;
    width: clamp(280px, 24vw, 420px);
}

.pp-buscador {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid var(--pp-magenta);
    border-radius: 12px;
    background-color: #FFFFFF;
    overflow: hidden;
}

.pp-buscador__campo {
    /* Al llegar aqui desde "Buscar" de la cabecera, la barra fija no lo tapa */
    scroll-margin-top: calc(var(--pp-alto-aviso) + var(--pp-alto-barra) + 20px);
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 8px 10px 20px;
    border: 0;
    background-color: transparent;
    color: var(--pp-texto);
    font-family: inherit;
    font-size: clamp(13px, .95vw, 18px);
    line-height: 1.3;
}

/* El control nativo de type=search suele ser una X pequeña. Se sustituye
   por el enlace Limpiar, con texto y una zona táctil suficiente. */
.pp-buscador__campo::-webkit-search-cancel-button {
    display: none;
    -webkit-appearance: none;
}

.pp-buscador__campo::placeholder {
    color: var(--pp-texto-suave);
    opacity: 1;
}

/* El cerco de foco se pinta en la pastilla entera, no en el hueco del
   campo, que quedaria partido por el boton. */
.pp-buscador__campo:focus {
    outline: none;
}

.pp-buscador:focus-within {
    outline: 2px solid var(--pp-azul);
    outline-offset: 2px;
}

.pp-buscador__boton {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-left: 1px solid var(--pp-fondo-barra);
    background-color: var(--pp-fondo-pie);
    color: var(--pp-texto);
    font-family: inherit;
    font-size: var(--pp-texto-fijo);
    font-weight: 600;
    cursor: pointer;
}

.pp-buscador__boton:hover,
.pp-buscador__boton:focus {
    background-color: var(--pp-fondo-barra);
}

.pp-buscador__boton img {
    width: clamp(15px, 1.1vw, 20px);
    height: auto;
}

.pp-buscador__limpiar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    border-left: 1px solid #E3E3E1;
    color: var(--pp-magenta);
    font-size: var(--pp-texto-fijo);
    font-weight: 600;
    text-decoration: none;
}

.pp-buscador__limpiar svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.pp-buscador__limpiar:hover,
.pp-buscador__limpiar:focus {
    background-color: #FFF1F8;
    text-decoration: underline;
}

.pp-buscador__ayuda {
    max-width: 420px;
    color: var(--pp-texto-suave);
    font-size: 13px;
    line-height: 1.25;
    text-align: left;
}

.pp-buscador__sugerencias {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    max-height: min(48vh, 360px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px;
    border: 1px solid #D7D7D4;
    border-radius: 12px;
    background-color: #FFFFFF;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    text-align: left;
}

.pp-buscador__sugerencias[hidden] {
    display: none;
}

.pp-buscador__sugerencia {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background-color: transparent;
    color: var(--pp-texto);
    font-family: inherit;
    font-size: var(--pp-texto-fijo);
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.pp-buscador__sugerencia:hover,
.pp-buscador__sugerencia:focus,
.pp-buscador__sugerencia--activa {
    outline: none;
    background-color: var(--pp-fondo-pie);
}

.pp-buscador__marca {
    padding: 0 2px;
    border-radius: 3px;
    background-color: #FDF0B4;
    color: var(--pp-magenta);
    font-weight: 700;
}

.pp-buscador__sin-sugerencias {
    display: block;
    padding: 12px;
    color: var(--pp-texto-suave);
    font-size: var(--pp-texto-fijo);
}

/* ---- Aviso de lo que se esta buscando ---- */

.pp-busqueda {
    max-width: 1920px;
    margin: 0 auto clamp(16px, 1.6vw, 30px);
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 18px;
    border-left: 5px solid var(--pp-magenta);
    background-color: var(--pp-fondo-aviso);
    color: var(--pp-texto-medio);
    font-size: var(--pp-texto-fijo);
    line-height: 1.4;
}

.pp-busqueda__quitar {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--pp-magenta);
    border-radius: 8px;
    color: var(--pp-magenta);
    font-weight: 600;
    text-decoration: none;
}

.pp-busqueda__quitar:hover,
.pp-busqueda__quitar:focus {
    background-color: var(--pp-magenta);
    color: #FFFFFF;
}

/* Lo encontrado, resaltado en los titulos por el script de la pagina */
.pp-marca {
    padding: 0 2px;
    border-radius: 3px;
    background-color: #FDF0B4;
    color: inherit;
}

/* ---- Selector "ordenar por" ----
   Maqueta 1920: pastilla de 382 x 74 con borde magenta sobre gris claro. */

.pp-orden {
    position: relative;
}

.pp-orden__boton {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: clamp(210px, 19vw, 310px);
    padding: 10px 8px 10px 20px;
    border: 1px solid var(--pp-magenta);
    border-radius: 12px;
    background-color: var(--pp-fondo-pie);
    color: var(--pp-texto);
    font-family: inherit;
    font-size: clamp(13px, .95vw, 18px);
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.pp-orden__etiqueta {
    flex: 0 0 auto;
}

.pp-orden__seleccion {
    flex: 1 1 auto;
    overflow: hidden;
    color: var(--pp-texto-suave);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-orden__flecha {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    border-left: 1px solid #FFFFFF;
}

/* La flecha doble de la maqueta apunta hacia abajo */
.pp-orden__flecha img {
    height: 13px;
    transform: rotate(90deg);
}

.pp-orden__panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    width: clamp(260px, 24vw, 390px);
    max-height: min(60vh, 540px);
    overflow-y: auto;
    padding: 14px 0;
    border: 1px solid var(--pp-magenta);
    border-radius: 12px;
    background-color: #FFFFFF;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    text-align: left;
}

.pp-orden__panel[hidden] {
    display: none;
}

.pp-orden__grupo {
    margin: 16px 0 4px;
    padding: 0 20px;
    color: var(--pp-texto);
    font-size: var(--pp-texto-fijo);
    font-weight: 600;
    text-transform: uppercase;
}

.pp-orden__pendiente {
    color: var(--pp-texto-suave);
    font-size: .82em;
    font-style: italic;
    font-weight: 400;
    text-transform: none;
}

.pp-orden__opcion {
    display: block;
    padding: 5px 20px 5px 36px;
    color: var(--pp-texto);
    font-size: var(--pp-texto-fijo);
    font-weight: 300;
    text-decoration: none;
}

.pp-orden__grupo--compacto,
.pp-orden__opcion--compacta {
    font-size: 14px;
}

.pp-orden__tipo-modalidad {
    font-size: .9em;
    white-space: nowrap;
}

a.pp-orden__opcion:hover,
a.pp-orden__opcion:focus {
    background-color: var(--pp-fondo-pie);
}

.pp-orden__opcion--todos {
    padding-left: 20px;
    font-weight: 600;
}

.pp-portal a.pp-orden__opcion--activa,
.pp-portal a.pp-orden__opcion--activa:hover,
.pp-portal a.pp-orden__opcion--activa:focus {
    background-color: var(--pp-magenta);
    color: #FFFFFF;
}

/* Opciones que aun no tienen datos detras */
.pp-orden__opcion--inactiva {
    color: #B5B5B4;
    cursor: not-allowed;
}

/* ---- Conmutador de vista: tarjetas o listado ---- */

.pp-vistas {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
}

.pp-vistas__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 35px;
    border: 1px solid #C6C6C5;
    border-radius: 10px;
    background-color: #FFFFFF;
    color: #A9A9A8;
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease;
}

.pp-vistas__boton svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.pp-vistas__boton:hover {
    color: var(--pp-texto-medio);
    border-color: var(--pp-texto-suave);
}

.pp-vistas__boton--activo {
    border-color: var(--pp-texto-medio);
    color: var(--pp-texto);
}

/* ---- Listado ----
   Maqueta 1920: cabecera magenta de 24 px sobre banda gris, filas de 54 px
   con fondo alterno #EDEDEC de lado a lado de la pagina. */

.pp-lista {
    /* Las bandas llegan a los bordes, como en la maqueta */
    margin-left: calc(-1 * var(--pp-margen));
    margin-right: calc(-1 * var(--pp-margen));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pp-lista__tabla {
    width: 100%;
    min-width: 940px;
    /* Ancho fijo por columna: cada fila ocupa una linea, como en la maqueta,
       aunque el nombre del centro organizador sea muy largo. */
    table-layout: fixed;
    border-collapse: collapse;
    font-size: clamp(13px, .84vw, 16px);
}

.pp-lista__tabla th {
    padding: 14px 10px;
    background-color: var(--pp-fondo-pie);
    color: var(--pp-magenta);
    font-weight: 400;
    white-space: nowrap;
}

.pp-lista__tabla td {
    padding: 11px 10px;
    overflow: hidden;
    color: var(--pp-texto);
    font-weight: 300;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.pp-lista__tabla tbody tr:nth-child(even) {
    background-color: var(--pp-fondo-pie);
}

.pp-lista__tabla th:first-child,
.pp-lista__tabla td:first-child {
    padding-left: var(--pp-margen);
}

.pp-lista__tabla th:last-child,
.pp-lista__tabla td:last-child {
    padding-right: var(--pp-margen);
}

.pp-lista__col-codigo   { width: 12%; }
.pp-lista__col-actividad{ width: 31%; text-align: left; }
.pp-lista__col-num      { width: 5.5%; text-align: center; }
.pp-lista__col-fechas   { width: 14%; text-align: center; }
.pp-lista__col-matricula{ width: 9%; text-align: center; }
.pp-lista__col-area     { width: 9%; text-align: center; }
.pp-lista__col-sede     { width: 10%; text-align: center; }

.pp-lista__tabla th.pp-lista__col-codigo,
.pp-lista__tabla th.pp-lista__col-actividad {
    text-align: left;
}

/* El nombre de la actividad abre la ficha */
.pp-lista__enlace {
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.pp-lista__enlace:hover,
.pp-lista__enlace:focus {
    color: var(--pp-magenta);
    text-decoration: underline;
}

.pp-lista__matricula {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    color: #FFFFFF;
    font-size: .86em;
    font-weight: 600;
    text-transform: capitalize;
}

.pp-lista__matricula.pp-curso__matricula--abierta { background-color: #7A9A16; }
.pp-lista__matricula.pp-curso__matricula--cerrada { background-color: var(--pp-texto-suave); }

/* ---- Paginador ----
   Maqueta 1920: "1 | 2 | 3 | 4 | 5 >>" centrado, 23,9 px, unos 60 px por
   debajo de la ultima fila de tarjetas. */

.pp-paginador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, .5vw, 10px);
    margin-top: clamp(26px, 3vw, 58px);
    color: var(--pp-texto);
    font-size: clamp(16px, 1.24vw, 24px);
    line-height: 1;
}

.pp-paginador__pagina {
    padding: 4px 8px;
    color: inherit;
    text-decoration: none;
}

.pp-paginador__pagina:hover {
    color: var(--pp-magenta);
}

.pp-paginador__pagina--activa {
    color: var(--pp-magenta);
    font-weight: 600;
}

.pp-paginador__separador {
    color: var(--pp-texto-suave);
}

.pp-paginador__flecha {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
}

.pp-paginador__flecha img {
    height: .62em;
}

.pp-paginador__flecha--anterior img {
    transform: scaleX(-1);
}

/* ---- Tarjeta ---- */

.pp-curso {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid #D9D9D8;
    border-radius: 10px;
    background-color: #FFFFFF;
}

.pp-curso__cabecera {
    position: relative;
}

.pp-curso__imagen {
    display: block;
    width: 100%;
    aspect-ratio: 579 / 234;
    object-fit: cover;
}

/* Distintivo obtenido de las casillas del curso. */
.pp-curso__distintivos {
    position: absolute;
    top: 12px;
    right: 14px;
    left: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.pp-curso__etapa {
    order: 1;
    max-width: 100%;
    padding: 5px 16px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .92);
    color: var(--pp-texto-suave);
    font-size: clamp(11px, .74vw, 14px);
    font-style: italic;
    font-weight: 700;
    line-height: 1.4;
}

/* Estado de la matricula */
.pp-curso__matricula {
    order: 0;
    padding: 5px 16px;
    border-radius: 999px;
    color: #FFFFFF;
    font-size: clamp(11px, .74vw, 14px);
    font-weight: 600;
    line-height: 1.4;
}

.pp-curso__matricula--abierta { background-color: #7A9A16; }
.pp-curso__matricula--cerrada { background-color: var(--pp-texto-suave); }

.pp-curso__modalidad {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 7px clamp(14px, 1.3vw, 25px);
    background-color: rgba(255, 255, 255, .88);
    color: var(--pp-texto);
    font-size: clamp(13px, .85vw, 16px);
    font-weight: 300;
    line-height: 1.3;
}

.pp-curso__modalidad strong {
    font-weight: 600;
}

.pp-curso__cuerpo {
    position: relative;
    flex: 1 1 auto;
    padding: clamp(13px, .95vw, 18px) clamp(13px, 1.1vw, 21px) clamp(14px, 1.2vw, 22px);
}

/* Circulo de creditos y horas, a la derecha del titulo */
.pp-curso__creditos {
    float: right;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: clamp(58px, 4.4vw, 84px);
    height: clamp(58px, 4.4vw, 84px);
    margin: 0 0 8px 12px;
    border-radius: 50%;
    background-color: #EDEDEC;
    color: var(--pp-texto);
    text-align: center;
}

.pp-curso__creditos strong {
    font-size: clamp(15px, 1.25vw, 24px);
    font-weight: 600;
    line-height: 1.1;
}

.pp-curso__creditos span {
    font-size: clamp(10px, .72vw, 14px);
    line-height: 1.2;
}

.pp-curso__titulo {
    margin: 0 0 clamp(12px, 1vw, 20px);
    color: var(--pp-magenta);
    font-size: clamp(16px, 1.28vw, 25px);
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    overflow-wrap: break-word;
}

.pp-curso__datos {
    clear: both;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp-curso__datos li {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: start;
    gap: 4px 9px;
    margin-bottom: 5px;
    font-size: clamp(13px, .84vw, 16px);
    line-height: 1.35;
}

.pp-curso__datos img {
    width: auto;
    height: 1em;
    margin-top: .2em;
}

/* Los datos ocultos reservan su altura al final, sin huecos entre los datos visibles. */
.pp-curso__datos li.pp-curso__preadmision--oculto,
.pp-curso__datos li.pp-curso__dirigido--oculto,
.pp-curso__datos li.pp-curso__lugar--oculto {
    visibility: hidden;
    order: 1;
}

.pp-curso__etiqueta {
    color: var(--pp-texto);
    font-weight: 400;
}

.pp-curso__valor {
    color: #9D9D9C;
    font-weight: 300;
    overflow-wrap: break-word;
}

/* Dato pendiente de desarrollo en el backend */
.pp-curso__valor--pendiente {
    font-style: italic;
}

.pp-curso__detalle {
    display: none;
}

.pp-curso__pie {
    margin: 0;
}

.pp-curso__mas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    padding: 10px 16px;
    border: 0;
    background-color: #C7C7C6;
    color: var(--pp-texto);
    font-family: inherit;
    font-size: var(--pp-texto-fijo);
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease;
}

.pp-curso__mas:hover,
.pp-curso__mas:focus {
    background-color: #A9A9A8;
}

.pp-curso__mas img {
    height: 13px;
}

/* ---- Detalle del curso dentro de la ventana emergente ---- */

.pp-detalle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 8px 18px;
    margin: 0;
}

.pp-detalle dt {
    color: var(--pp-texto);
    font-weight: 600;
}

.pp-detalle dd {
    margin: 0;
    overflow-wrap: break-word;
}

.pp-detalle__temario,
.pp-detalle__horario,
.pp-curso__horario {
    white-space: pre-line;
}

/* ============ 5. Pie: centros ============ */

.pp-pie__titulo {
    margin: 0;
    padding: clamp(18px, calc(3vw * var(--pp-escala)), calc(58px * var(--pp-escala)))
             var(--pp-margen)
             clamp(8px, calc(1.4vw * var(--pp-escala)), calc(27px * var(--pp-escala)));
    color: var(--pp-texto-medio);
    font-size: clamp(20px, calc(2.5vw * var(--pp-escala)), calc(48px * var(--pp-escala)));
    font-weight: 300;
    line-height: 1.1;
}

.pp-centros {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.pp-centro {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(130px, calc(12.97vw * var(--pp-escala)), calc(249px * var(--pp-escala)));
    padding: clamp(14px, calc(1.6vw * var(--pp-escala)), calc(30px * var(--pp-escala)))
             clamp(16px, calc(2.4vw * var(--pp-escala)), calc(46px * var(--pp-escala)));
    color: #FFFFFF;
    text-align: right;
    background-color: var(--pp-magenta);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.pp-centro--santander {
    background-image: linear-gradient(rgba(229, 16, 127, .87), rgba(229, 16, 127, .87)),
                      url("../../images/publico/fondo-cep-santander.jpg");
}

.pp-centro--torrelavega {
    background-color: var(--pp-lima);
    background-image: linear-gradient(rgba(199, 211, 14, .85), rgba(199, 211, 14, .85)),
                      url("../../images/publico/fondo-cep-torrelavega.jpg");
}

.pp-centro--laredo {
    background-color: var(--pp-naranja);
    background-image: linear-gradient(rgba(249, 177, 13, .87), rgba(249, 177, 13, .87)),
                      url("../../images/publico/fondo-cep-laredo.jpg");
}

.pp-centro--cited {
    background-color: var(--pp-azul-cited);
    background-image: linear-gradient(rgba(85, 126, 162, .90), rgba(85, 126, 162, .90)),
                      url("../../images/publico/fondo-cited.jpg");
}

.pp-centro__nombre {
    margin: 0 0 clamp(4px, calc(0.7vw * var(--pp-escala)), calc(14px * var(--pp-escala)));
    font-size: clamp(24px, calc(3.14vw * var(--pp-escala)), calc(60px * var(--pp-escala)));
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -.01em;
}

.pp-centro--cited .pp-centro__nombre {
    font-size: clamp(22px, calc(2.55vw * var(--pp-escala)), calc(49px * var(--pp-escala)));
    font-weight: 700;
    letter-spacing: .02em;
}

/* El enlace del nombre cubre el recuadro; el mapa y las redes quedan por encima. */
.pp-centro__enlace::after {
    content: "";
    position: absolute;
    inset: 0;
}

.pp-centro__enlace:focus-visible::after {
    outline: 2px solid currentColor;
    outline-offset: -4px;
}

.pp-centro__telefono {
    font-size: clamp(19px, calc(1.9vw * var(--pp-escala)), calc(36px * var(--pp-escala)));
    font-weight: 300;
    line-height: 1.2;
}

.pp-centro__telefono strong,
.pp-centro__correo strong {
    font-weight: 700;
}

/* Correo: escala poco y nunca baja de --pp-texto-fijo */
.pp-centro__correo {
    margin-top: clamp(2px, 0.2vw, 4px);
    font-size: clamp(var(--pp-texto-fijo), calc(1.22vw * var(--pp-escala)), calc(23px * var(--pp-escala)));
    font-weight: 300;
    line-height: 1.3;
    word-break: break-word;
}

.pp-centro__direccion {
    display: flex;
    align-items: center;
    gap: clamp(8px, calc(1vw * var(--pp-escala)), calc(20px * var(--pp-escala)));
    margin-top: clamp(8px, calc(1.4vw * var(--pp-escala)), calc(27px * var(--pp-escala)));
    font-size: var(--pp-texto-fijo);
    font-weight: 300;
    line-height: 1.3;
}

.pp-centro__direccion img {
    flex: 0 0 auto;
    width: auto;
    height: 18px;
}

/* El icono de ubicacion abre el mapa del centro */
.pp-centro__mapa {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: transform .15s ease;
}

.pp-centro__mapa:hover,
.pp-centro__mapa:focus {
    transform: scale(1.25);
}

.pp-centro__direccion span {
    flex: 1 1 auto;
}

/* ============ 6. Pie: información ============ */

.pp-pie__info {
    background-color: var(--pp-fondo-pie);
}

.pp-pie__info-interior {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 2.5fr);
    align-items: center;
    gap: clamp(16px, 2vw, 40px);
    padding-top: clamp(10px, calc(1.15vw * var(--pp-escala)), calc(22px * var(--pp-escala)));
    padding-bottom: clamp(10px, calc(1.15vw * var(--pp-escala)), calc(22px * var(--pp-escala)));
}

.pp-pie__enlaces li + li {
    border-top: 1px solid var(--pp-separador);
}

.pp-pie__enlaces a {
    display: flex;
    align-items: center;
    gap: clamp(8px, 0.7vw, 14px);
    padding: clamp(4px, calc(0.46vw * var(--pp-escala)), calc(9px * var(--pp-escala))) 0;
    color: var(--pp-texto-medio);
    font-size: var(--pp-texto-fijo);
    line-height: 1.2;
    text-transform: uppercase;
}

.pp-pie__enlaces a:hover {
    color: var(--pp-texto);
}

.pp-pie__enlaces img {
    flex: 0 0 auto;
    width: auto;
    height: 11px;
}

.pp-pie__instituciones {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 2vw, 40px);
}

.pp-pie__instituciones img {
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
    object-fit: contain;
}

.pp-pie__instituciones img.pp-logo-cited     { height: clamp(42px, calc(4.6vw * var(--pp-escala)), calc(88px * var(--pp-escala))); }
.pp-pie__instituciones img.pp-logo-cep       { height: clamp(36px, calc(4.0vw * var(--pp-escala)), calc(77px * var(--pp-escala))); }
.pp-pie__instituciones img.pp-logo-cantabria  { height: clamp(46px, calc(5.9vw * var(--pp-escala)), calc(113px * var(--pp-escala))); }
.pp-pie__instituciones img.pp-logo-ministerio { height: clamp(30px, calc(4.0vw * var(--pp-escala)), calc(77px * var(--pp-escala))); }
.pp-pie__instituciones img.pp-logo-ue         { height: clamp(20px, calc(2.5vw * var(--pp-escala)), calc(48px * var(--pp-escala))); }

/* ============ 7. Pie: barra legal ============ */

.pp-pie__legal {
    background-color: var(--pp-fondo-legal);
}

.pp-pie__legal-interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px, 2vw, 40px);
    padding-top: clamp(7px, calc(0.73vw * var(--pp-escala)), calc(14px * var(--pp-escala)));
    padding-bottom: clamp(7px, calc(0.73vw * var(--pp-escala)), calc(14px * var(--pp-escala)));
}

.pp-pie__redes {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.5vw, 10px);
}

.pp-pie__redes img {
    display: block;
    width: auto;
    height: 20px;
}

.pp-pie__redes a {
    display: block;
    opacity: .9;
    transition: opacity .15s ease-in-out;
}

.pp-pie__redes a:hover {
    opacity: 1;
}

.pp-centro__redes {
    justify-content: flex-end;
    margin-top: 10px;
}

.pp-centro__redes a {
    position: relative;
    z-index: 1;
    padding: 6px;
    border-radius: 4px;
    background-color: #FFFFFF;
}

.pp-pie__copyright {
    color: var(--pp-texto-medio);
    font-size: var(--pp-texto-fijo);
    line-height: 1.3;
    text-align: right;
}

/* ============ 8. Responsivo ============ */

/* Tablet y móvil: la navegación pasa a menú desplegable */
@media (max-width: 991px) {

    .pp-cabecera__barra {
        flex-wrap: wrap;
        min-height: 0;
        padding-right: 0;
    }

    .pp-cabecera__marcas {
        gap: 14px;
        padding: 9px 0;
    }

    .pp-cabecera__logo img          { height: clamp(34px, 6.5vw, 56px); }
    .pp-cabecera__logo--cited img   { height: clamp(35px, 6.8vw, 60px); }

    .pp-cabecera__boton {
        display: flex;
        align-self: stretch;
    }

    .pp-nav {
        display: none;
        flex: 1 0 100%;
        flex-direction: column;
        border-top: 2px solid var(--pp-separador);
    }

    .pp-nav.pp-nav--abierto {
        display: flex;
        max-height: calc(100vh - var(--pp-alto-aviso) - var(--pp-alto-barra));
        overflow-y: auto;
    }

    .pp-nav::after {
        display: none;
    }

    .pp-nav__item,
    .pp-nav__item:first-child {
        flex-direction: row;
        justify-content: flex-start;
        gap: 14px;
        width: 100%;
        min-width: 0;
        padding: 11px var(--pp-margen);
        border-left: 0;
        border-top: 1px solid var(--pp-separador);
        text-align: left;
    }

    .pp-nav__item img,
    .pp-nav__item--educantabria img {
        height: 24px;
    }

    /* Cada opción conserva su color de la franja cuatricolor */
    .pp-nav__item--educantabria { box-shadow: inset 4px 0 0 var(--pp-azul); }
    .pp-nav__item--yedra        { box-shadow: inset 4px 0 0 var(--pp-magenta); }
    .pp-nav__item--buscar       { box-shadow: inset 4px 0 0 var(--pp-lima); }
    .pp-nav__item--acceso       { box-shadow: inset 4px 0 0 var(--pp-naranja); }
}

/* Noticias: sin flechas y con margen normal en tableta y movil */
@media (max-width: 991px) {

    .pp-portal {
        --pp-margen-noticia: var(--pp-margen);
        --pp-alto-noticia: 260px;
    }

    .pp-noticias__flecha {
        display: none;
    }

    .pp-noticias__puntos,
    .pp-noticias__mandos {
        gap: 14px;
    }
}

@media (max-width: 575px) {

    .pp-portal {
        --pp-alto-noticia: 230px;
    }

    .pp-noticia {
        padding-bottom: 56px;
    }

    .pp-noticia__resalte {
        gap: 8px;
        padding: 9px 15px;
        font-size: 15px;
        letter-spacing: .05em;
    }

    .pp-noticia__resalte img {
        height: 17px;
    }

    .pp-modal {
        padding: 0;
    }

    .pp-modal__caja {
        max-width: none;
        max-height: 100vh;
        height: 100%;
    }

    .pp-modal__cabecera {
        padding: 16px 16px 12px;
    }

    .pp-modal__cuerpo {
        padding: 16px 16px 24px;
    }

    .pp-mapa iframe {
        height: calc(100vh - 160px);
    }
}

/* Pie: de 4 a 2 columnas */
@media (max-width: 1199px) {

    .pp-pie__info-interior {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }

    .pp-pie__instituciones {
        grid-column: 1 / -1;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 1199px) {

    .pp-cursos__rejilla {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {

    .pp-centros {
        grid-template-columns: repeat(2, 1fr);
    }

    .pp-centro {
        min-height: 0;
        padding: 18px 22px;
    }

    .pp-centro__nombre                   { font-size: clamp(22px, 3.4vw, 34px); }
    .pp-centro--cited .pp-centro__nombre { font-size: clamp(20px, 2.9vw, 29px); }
    .pp-centro__telefono                 { font-size: clamp(17px, 2.2vw, 24px); }
    .pp-centro__correo                   { font-size: clamp(14px, 1.7vw, 17px); }
    .pp-centro__direccion                { font-size: 14px; justify-content: flex-end; }
    .pp-centro__direccion img            { height: 17px; }
    .pp-centro__direccion span           { flex: 0 1 auto; }
}

@media (max-width: 991px) {

    /* En pantallas estrechas el listado pierde las columnas accesorias antes
       que obligar a desplazar la tabla a lo ancho. */
    .pp-lista__col-area,
    .pp-lista__col-sede {
        display: none;
    }

    .pp-lista__tabla {
        min-width: 700px;
    }
}

@media (max-width: 767px) {

    .pp-cursos__cabecera {
        flex-wrap: wrap;
    }

    .pp-cursos__controles {
        width: 100%;
        align-items: stretch;
    }

    .pp-orden__boton {
        width: 100%;
    }

    .pp-buscador__envoltura,
    .pp-buscador {
        width: 100%;
        min-width: 0;
    }

    .pp-buscador__ayuda {
        max-width: none;
        align-self: flex-start;
    }

    .pp-busqueda {
        align-items: flex-start;
    }

    .pp-orden__panel {
        left: 0;
        width: auto;
    }

    .pp-vistas {
        justify-content: flex-end;
    }

    .pp-lista__col-num {
        display: none;
    }

    .pp-lista__tabla {
        min-width: 520px;
    }

    .pp-cursos__rejilla {
        grid-template-columns: minmax(0, 1fr);
    }

    .pp-detalle {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px 0;
    }

    .pp-detalle dd {
        margin-bottom: 10px;
    }

    .pp-modal--curso .pp-detalle {
        grid-template-columns: minmax(0, 1fr);
    }

    .pp-modal--curso .pp-detalle dt {
        padding-bottom: 2px;
        border-bottom: 0;
    }

    .pp-modal--curso .pp-detalle dd {
        margin: 0;
        padding-top: 2px;
    }
}

@media (max-width: 575px) {

    .pp-modal {
        align-items: flex-end;
        padding: 8px;
    }

    .pp-modal__caja {
        max-height: calc(100vh - 16px);
        border-radius: 12px;
    }

    .pp-modal__cabecera {
        gap: 10px;
        padding: 14px 14px 12px;
    }

    .pp-modal__cerrar {
        width: 44px;
        height: 44px;
    }

    .pp-modal__cuerpo {
        padding: 14px;
    }

    .pp-buscador__campo {
        padding-left: 12px;
        font-size: 16px;
    }

    .pp-buscador__limpiar,
    .pp-buscador__boton {
        padding-right: 10px;
        padding-left: 10px;
    }

    .pp-buscador__boton img {
        display: none;
    }

    .pp-cabecera__aviso {
        font-size: 13px;
    }

    .pp-centros {
        grid-template-columns: 1fr;
    }

    .pp-pie__info-interior {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pp-pie__legal-interior {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .pp-pie__copyright {
        text-align: left;
    }

    .pp-pie__instituciones {
        gap: 18px;
    }

    .pp-pie__instituciones img.pp-logo-cited     { height: 46px; }
    .pp-pie__instituciones img.pp-logo-cep       { height: 40px; }
    .pp-pie__instituciones img.pp-logo-cantabria  { height: 52px; }
    .pp-pie__instituciones img.pp-logo-ministerio { height: 34px; }
    .pp-pie__instituciones img.pp-logo-ue         { height: 24px; }
}

/* ============ 9. Impresión ============ */

@media print {

    .pp-cabecera {
        position: static;
        box-shadow: none;
    }

    .pp-cabecera__boton,
    .pp-nav,
    .pp-noticias__flecha,
    .pp-noticias__mandos,
    .pp-modal {
        display: none !important;
    }

    /* En papel se listan todas las noticias, una debajo de otra */
    .pp-noticias__pista {
        display: block;
    }

    .pp-noticia {
        visibility: visible;
        opacity: 1;
        min-height: 0;
        page-break-inside: avoid;
    }

    .pp-noticias {
        background-image: none !important;
    }

    .pp-centro {
        background-image: none !important;
    }
}