:root {
        --red: #c71920;
        --red-dark: #9f1118;
        --blue: #083b66;
        --blue-2: #0d568d;
        --ink: #17212b;
        --muted: #617080;
        --soft: #f3f6f8;
        --white: #ffffff;
        --shadow: 0 18px 45px rgba(8, 59, 102, 0.14);
    }

    * {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        font-family:
            Inter,
            ui-sans-serif,
            system-ui,
            -apple-system,
            "Segoe UI",
            sans-serif;
        color: var(--ink);
        background: #ffffff;
    }

    button,
    a {
        font: inherit;
    }

    button {
        cursor: pointer;
    }

    .shell {
        width: min(1180px, calc(100% - 36px));
        margin: auto;
    }

    /* ========================================
       ENCABEZADO PRINCIPAL
       ======================================== */

    .top {
        background-color: var(--red);
        background-image: url("../imagenes/fondo-satelfi.png");
        background-position: center 48%;
        background-repeat: no-repeat;
        background-size: cover;
        color: white;
        position: relative;
        overflow: hidden;
    }

    .top::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;

        background: linear-gradient(
            90deg,
            rgba(125, 0, 10, 0.88) 0%,
            rgba(180, 0, 15, 0.65) 50%,
            rgba(125, 0, 10, 0.50) 100%
        );
}

    .brandbar {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      /* 18 px de espacio en los cuatro lados */
      padding: 18px;

      position: relative;
      z-index: 2;
    }

    /* ========================================
       LOGOTIPOS
       ======================================== */

    .marks {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .marks .mark {
        width: 80px;
        height: 58px;
        min-width: 0;
        padding: 6px;
        background: white;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    /* Cuadro de SATELFI */

    .marks .mark:first-child {
        width: 105px;
    }

    /* Cuadro de la FI */

    .marks .mark:last-child {
        width: 65px;
    }

    /* Imágenes de los logotipos */

    .marks .mark img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    /* ========================================
       BOTÓN DE INICIAR SESIÓN
       ======================================== */

    .login {
        display: flex;
        align-items: center;
        gap: 9px;
        color: white;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.45);
        padding: 11px 16px;
        border-radius: 999px;
        font-weight: 750;
        position: relative;
        z-index: 2;
        transition:
            background 0.2s,
            color 0.2s;
    }

    .login:hover {
        background: white;
        color: var(--red);
    }

    .login-icon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    /* ========================================
       TÍTULO PRINCIPAL
       ======================================== */

    .hero {
        padding: 34px 0 55px;
        position: relative;
        z-index: 1;
    }

    .eyebrow {
        font-size: 0.82rem;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        opacity: 0.78;
        margin: 0 0 12px;
    }

    .hero h1 {
        font-size: clamp(2.3rem, 6vw, 4.9rem);
        line-height: 0.97;
        letter-spacing: -0.045em;
        max-width: 950px;
        margin: 0;
    }

    .hero p {
        font-size: 1.1rem;
        line-height: 1.6;
        max-width: 680px;
        margin: 22px 0 0;
        color: #ffe8e9;
    }

    /* ========================================
       MENÚ DE NAVEGACIÓN
       ======================================== */

    .nav-wrap {
        background: white;
        position: sticky;
        top: 0;
        z-index: 20;
        border-bottom: 1px solid #dbe2e7;
    }

    .nav {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        gap: 5px;
    }

    .nav a {
        color: var(--blue);
        text-decoration: none;
        text-transform: uppercase;
        font-size: 0.88rem;
        font-weight: 850;
        letter-spacing: 0.015em;
        padding: 19px 15px;
        border-bottom: 4px solid transparent;
        text-align: center;
    }

    .nav a:hover,
    .nav a.active {
        color: var(--red);
        border-color: var(--red);
    }

    .menu {
        display: none;
        border: 0;
        background: none;
        color: var(--blue);
        font-size: 1.5rem;
        padding: 13px;
    }

    /* ========================================
       CONTENIDO PRINCIPAL
       ======================================== */

    main {
        background: linear-gradient(
            #ffffff 0,
            #f7f9fb 500px
        );
    }

    .featured {
        padding: 48px 0 34px;
    }

    .section-kicker {
        color: var(--red);
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        font-size: 0.78rem;
    }

    .section-head {
        display: flex;
        justify-content: space-between;
        align-items: end;
        gap: 24px;
        margin-bottom: 22px;
    }

    .section-head h2 {
        font-size: clamp(1.7rem, 4vw, 2.5rem);
        letter-spacing: -0.035em;
        margin: 7px 0 0;
    }

    /* ========================================
       FLECHAS DEL CARRUSEL
       ======================================== */

    .arrows {
        display: flex;
        gap: 10px;
    }

    .arrow {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: 1px solid #c8d2da;
        background: white;
        color: var(--red);
        font-size: 1.5rem;
    }

    .arrow:hover {
        background: var(--red);
        color: white;
        border-color: var(--red);
    }

    /* ========================================
       CARRUSEL
       ======================================== */

    .carousel {
        background: white;
        border-radius: 22px;
        box-shadow: var(--shadow);
        overflow: hidden;
        min-height: 360px;
    }

    .slide {
        display: none;
        grid-template-columns: 1.05fr 0.95fr;
        min-height: 360px;
    }

    .slide.active {
        display: grid;
    }

    .poster {
        background: linear-gradient(
            145deg,
            #06385f,
            #0a527f
        );
        padding: 44px;
        color: white;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .poster.red {
        background: linear-gradient(
            145deg,
            #9f1118,
            #df2d34
        );
    }

    .poster.gold {
        background: linear-gradient(
            145deg,
            #806000,
            #c89811
        );
    }

    /*
       Este círculo pertenece a los anuncios
       del carrusel, no al encabezado.
    */

    .poster::after {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        border: 40px solid rgba(255, 255, 255, 0.09);
        border-radius: 50%;
        right: -100px;
        top: -100px;
    }

    .poster small {
        font-weight: 850;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .poster h3 {
        font-size: clamp(2rem, 5vw, 3.5rem);
        line-height: 1;
        margin: 12px 0;
        letter-spacing: -0.04em;
    }

    .poster p {
        font-size: 1rem;
        line-height: 1.5;
        margin: 0;
        max-width: 440px;
        color: #edf8ff;
    }

    /* ========================================
       INFORMACIÓN DEL EVENTO
       ======================================== */

    .event-info {
        padding: 44px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .event-info .date {
        color: var(--red);
        font-weight: 850;
    }

    .event-info h4 {
        font-size: 1.8rem;
        margin: 10px 0;
    }

    .event-info p {
        color: var(--muted);
        line-height: 1.65;
        margin: 0 0 24px;
    }

    .primary {
        align-self: flex-start;
        border: 0;
        border-radius: 10px;
        background: var(--red);
        color: white;
        padding: 13px 20px;
        font-weight: 800;
    }

    /* ========================================
       PUNTOS DEL CARRUSEL
       ======================================== */

    .dots {
        text-align: center;
        padding: 18px;
    }

    .dot {
        width: 10px;
        height: 10px;
        border: 0;
        border-radius: 50%;
        background: #c9d2d9;
        margin: 0 4px;
        padding: 0;
    }

    .dot.active {
        background: var(--red);
        transform: scale(1.25);
    }

    /* ========================================
       TARJETAS INFERIORES
       ======================================== */

    .paths {
        padding: 45px 0 75px;
    }

    .cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .card {
        background: white;
        padding: 26px;
        border: 1px solid #e0e7eb;
        border-radius: 17px;
        text-decoration: none;
        color: inherit;
        transition: 0.2s;
    }

    .card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow);
        border-color: transparent;
    }

    .card .num {
        color: var(--red);
        font-weight: 900;
        font-size: 0.8rem;
    }

    .card h3 {
        color: var(--blue);
        font-size: 1.35rem;
        margin: 18px 0 10px;
    }

    .card p {
        color: var(--muted);
        line-height: 1.55;
        margin: 0;
    }

    .card span {
        display: inline-block;
        color: var(--red);
        font-weight: 800;
        margin-top: 20px;
    }

    /* ========================================
       PIE DE PÁGINA
       ======================================== */

    footer {
        background: #062b4b;
        color: #c9d9e5;
        padding: 30px 0;
    }

    .foot {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        align-items: center;
    }

    .foot strong {
        color: white;
    }

    /* ========================================
       VENTANA DE INICIAR SESIÓN
       ======================================== */

    dialog {
        border: 0;
        border-radius: 20px;
        padding: 0;
        max-width: 430px;
        width: calc(100% - 32px);
        box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
    }

    dialog::backdrop {
        background: rgba(4, 25, 42, 0.66);
    }

    .modal {
        padding: 30px;
    }

    .modal h2 {
        color: var(--blue);
        margin: 0;
    }

    .modal p {
        color: var(--muted);
        line-height: 1.5;
    }

    .modal label {
        display: block;
        font-weight: 750;
        margin: 16px 0 6px;
    }

    .modal input {
        width: 100%;
        padding: 12px;
        border: 1px solid #c7d2da;
        border-radius: 9px;
        font: inherit;
    }

    .modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 24px;
    }

    .secondary {
        border: 1px solid #c7d2da;
        background: white;
        border-radius: 9px;
        padding: 11px 16px;
    }

    .demo-note {
        font-size: 0.8rem !important;
        background: #fff4d9;
        padding: 10px;
        border-radius: 8px;
        color: #745700 !important;
    }

    /* ========================================
       DISEÑO PARA CELULARES
       ======================================== */

    @media (max-width: 800px) {
        .shell {
            width: min(100% - 24px, 680px);
        }

        .brandbar {
            padding: 12px 0;
        }

        .marks .mark {
            height: 48px;
        }

        .marks .mark:first-child {
            width: 88px;
        }

        .marks .mark:last-child {
            width: 52px;
        }

        .hero {
            padding: 25px 0 38px;
        }

        .hero p {
            font-size: 1rem;
        }

        .menu {
            display: block;
            margin-left: auto;
        }

        .nav {
            flex-wrap: wrap;
        }

        .nav a {
            display: none;
            width: 100%;
            padding: 14px;
        }

        .nav.open a {
            display: block;
        }

        .slide,
        .slide.active {
            grid-template-columns: 1fr;
        }

        .poster {
            min-height: 290px;
            padding: 30px;
        }

        .event-info {
            padding: 28px;
        }

        .cards {
            grid-template-columns: 1fr;
        }

        .foot {
            align-items: flex-start;
            flex-direction: column;
        }

        .login .login-text {
            display: none;
        }

        .login {
            padding: 11px 14px;
        }

        .section-head {
            align-items: center;
        }

        .featured {
            padding-top: 32px;
        }
        .beginner-intro {
            padding: 55px 0;
        }

        .beginner-intro-content {
            grid-template-columns: minmax(0, 1fr);
            gap: 35px;
        }

        .beginner-text h2 {
            font-size: clamp(2.3rem, 11vw, 3.5rem);
        }

        .beginner-description {
            font-size: 1rem;
        }

        .beginner-question {
            padding: 25px;
        }

        .topic-grid {
            grid-template-columns: minmax(0, 1fr);
        }
        .beginner-highlight {
            font-size: 1.15rem;
        }

        .beginner-image img {
            height: 290px;
        }
    }
    /* Centrar y ampliar el contenido principal del encabezado */
  .hero {
    padding: 48px 0 65px;
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* FACULTAD DE INGENIERÍA · UNAM */
  .eyebrow {
      font-size: 1rem;
      font-weight: 850;
      letter-spacing: 0.18em;
      margin: 0 0 15px;
  }

  /* Telecomunicaciones FI */
  .hero h1 {
      font-size: clamp(3.2rem, 6vw, 5.5rem);
      line-height: 1;
      max-width: 1100px;
      margin: 0;
  }

  /* Un espacio para aprender... */
  .hero p {
      font-size: 1.25rem;
      line-height: 1.6;
      max-width: 850px;
      margin: 24px auto 0;
  }
  /* ========================================
   CORRECCIÓN DEL TAMAÑO DE LOS BANNERS
   ======================================== */

.carousel {
    width: 100%;
    min-height: 480px;
    overflow: hidden;
}

.slide {
    width: 100%;
    min-height: 480px;

    /*
       minmax(0, ...) impide que la imagen
       agrande la columna por su tamaño original.
    */
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);
}

.banner-container {
    width: 100%;
    min-width: 0;
    height: 480px;
    padding: 20px;

    background: #eef2f5;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.banner-container img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
    object-position: center;
}

.event-info {
    width: 100%;
    min-width: 0;
    padding: 45px;
    overflow: hidden;
}

/* ========================================
   PÁGINA: TELECOM DESDE CERO
   ======================================== */

.beginner-intro {
    padding: 75px 0;
    background:
        linear-gradient(
            135deg,
            #062b4b,
            var(--blue-2)
        );
    color: white;
}

.beginner-intro-content {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(0, 0.8fr);
    align-items: center;
    gap: 65px;
}

.beginner-text h2 {
    max-width: 720px;
    margin: 10px 0 20px;
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.beginner-description {
    max-width: 700px;
    margin: 0 0 30px;
    color: #d8eaf7;
    font-size: 1.15rem;
    line-height: 1.7;
}

.beginner-button {
    display: inline-block;
    text-decoration: none;
}

.beginner-question {
    padding: 35px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.beginner-question span {
    display: block;
    margin-bottom: 16px;
    color: #ffb8bb;
    font-size: 0.8rem;
    font-weight: 850;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.beginner-question strong {
    display: block;
    font-size: 1.55rem;
    line-height: 1.35;
}

.beginner-question p {
    margin: 20px 0 0;
    color: #d8eaf7;
    line-height: 1.65;
}

.beginner-topics {
    padding-top: 70px;
    padding-bottom: 85px;
}

.topic-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.topic-card {
    min-width: 0;
    padding: 28px;
    border: 1px solid #dfe6eb;
    border-radius: 18px;
    background: white;
    transition:
        transform 0.2s,
        box-shadow 0.2s,
        border-color 0.2s;
}

.topic-card:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: var(--shadow);
}

.topic-number {
    color: var(--red);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.topic-card h3 {
    margin: 18px 0 12px;
    color: var(--blue);
    font-size: 1.35rem;
}

.topic-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.topic-card a {
    display: inline-block;
    margin-top: 23px;
    color: var(--red);
    font-weight: 800;
    text-decoration: none;
}

.topic-card a:hover {
    text-decoration: underline;
}

/* Frase destacada del inicio */

.beginner-highlight {
    margin: 22px 0 8px;
    color: white;
    font-size: 1.35rem;
    font-weight: 800;
}

/* Imagen de Telecom desde cero */

.beginner-image {
    min-width: 0;
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);
}

.beginner-image img {
    display: block;
    width: 100%;
    height: 390px;
    object-fit: cover;
}

.image-label {
    position: absolute;
    right: 18px;
    bottom: 18px;
    left: 18px;

    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;

    color: white;
    background: rgba(6, 43, 75, 0.88);
    backdrop-filter: blur(8px);

    font-size: 0.95rem;
    font-weight: 800;
    text-align: center;
}

/* Imagen dentro de las tarjetas */

.topic-card-image {
    width: 100%;
    height: 150px;
    margin: 18px 0;
    overflow: hidden;
    border-radius: 12px;
    background: #eef3f6;
}

.topic-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Segundo párrafo de la primera tarjeta */

.topic-elements {
    margin-top: 12px !important;
    color: var(--blue) !important;
    font-weight: 700;
}

/* Enlace del título hacia la página principal */

.home-title {
    color: inherit;
    text-decoration: none;
}

.home-title:hover {
    color: inherit;
    text-decoration: none;
}

.home-title:focus-visible {
    outline: 3px solid white;
    outline-offset: 7px;
    border-radius: 5px;
}

/* ========================================
   PÁGINAS DE ARTÍCULOS
   ======================================== */

.article-page {
    background: #f6f8fa;
}

.article-hero {
    padding: 70px 0 75px;
    color: white;
    background:
        linear-gradient(
            135deg,
            #062b4b,
            #0d568d
        );
}

.article-hero-content {
    max-width: 950px;
}

.article-back {
    display: inline-block;
    margin-bottom: 40px;
    color: #d7eafa;
    font-weight: 750;
    text-decoration: none;
}

.article-back:hover {
    color: white;
    text-decoration: underline;
}

.article-hero h2 {
    max-width: 950px;
    margin: 12px 0 22px;
    font-size: clamp(2.8rem, 6vw, 5rem);
    line-height: 1.04;
    letter-spacing: -0.045em;
}

.article-introduction {
    max-width: 800px;
    margin: 0;
    color: #d7eafa;
    font-size: 1.2rem;
    line-height: 1.75;
}

.article-content {
    max-width: 1180px;
    padding-top: 70px;
    padding-bottom: 90px;
}

.article-section {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(0, 0.8fr);
    gap: 65px;
    align-items: center;
}

.article-section h3,
.communication-section h3,
.article-story h3,
.article-summary h3 {
    margin: 10px 0 20px;
    color: var(--blue);
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.035em;
}

.article-section-text p {
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

.article-section-text strong {
    color: var(--blue);
}

.article-example {
    padding: 35px;
    border-left: 6px solid var(--red);
    border-radius: 15px;
    background: white;
    box-shadow: var(--shadow);
}

.article-example span {
    display: block;
    margin-bottom: 15px;
    color: var(--red);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.article-example strong {
    color: var(--blue);
    font-size: 1.35rem;
    line-height: 1.5;
}

/* Diagrama */

.communication-section {
    margin-top: 90px;
}

.communication-introduction {
    max-width: 750px;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.75;
}

.communication-diagram {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-top: 38px;
}

.communication-element {
    min-height: 260px;
    padding: 24px;
    border: 1px solid #dfe6eb;
    border-radius: 17px;
    background: white;
}

.element-symbol {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    background: var(--red);
    font-size: 1.1rem;
    font-weight: 900;
}

.communication-element h4 {
    margin: 20px 0 10px;
    color: var(--blue);
    font-size: 1.25rem;
}

.communication-element p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.diagram-arrow {
    color: var(--red);
    font-size: 2rem;
    font-weight: 900;
}

/* Ejemplo paso a paso */

.article-story {
    margin-top: 90px;
    padding: 45px;
    border-radius: 22px;
    background: white;
}

.story-step {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #dfe6eb;
    border-radius: 17px;
    background: #f1f5f8;
}

.story-step > img {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.story-step-content {
    display: flex;
    gap: 18px;
    padding: 22px;
}

.story-number {
    width: 38px;
    height: 38px;
    flex-shrink: 0;

    display: grid;
    place-items: center;

    color: white;
    background: var(--red);
    border-radius: 50%;
    font-weight: 900;
}

.story-step h4 {
    margin: 3px 0 8px;
    color: var(--blue);
    font-size: 1.1rem;
}

.story-step p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

/* Resumen */

.article-summary {
    margin-top: 90px;
    padding: 45px;
    border-radius: 22px;
    color: white;
    background: var(--blue);
}

.article-summary h3 {
    color: white;
}

.article-summary > p {
    max-width: 800px;
    color: #d7eafa;
    font-size: 1.08rem;
    line-height: 1.75;
}

.article-next {
    display: inline-block;
    margin-top: 18px;
    text-decoration: none;
}

/* Versión para celulares */

@media (max-width: 800px) {
    .article-hero {
        padding: 50px 0 55px;
    }

    .article-back {
        margin-bottom: 30px;
    }

    .article-hero h2 {
        font-size: clamp(2.4rem, 12vw, 3.6rem);
    }

    .article-introduction {
        font-size: 1.05rem;
    }

    .article-content {
        padding-top: 50px;
        padding-bottom: 60px;
    }

    .article-section {
        grid-template-columns: minmax(0, 1fr);
        gap: 35px;
    }

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

    .diagram-arrow {
        transform: rotate(90deg);
        text-align: center;
    }

    .communication-element {
        min-height: auto;
    }

    .article-story {
        padding: 25px;
    }

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

    .article-summary {
        padding: 28px;
    }
    .article-main-image img {
        height: 250px;
    }

    .story-step > img {
        height: 210px;
    }
}

/* Imagen introductoria del artículo */

.article-main-image {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 20px;
    background: white;
    box-shadow: var(--shadow);
}

.article-main-image img {
    display: block;
    width: 100%;
    height: 330px;
    object-fit: cover;
}

.article-main-image figcaption {
    padding: 15px 20px;
    color: var(--muted);
    background: white;
    font-size: 0.9rem;
    line-height: 1.5;
}


/* ========================================
   CUADRÍCULA 2 × 2 DEL EJEMPLO
   ======================================== */

.story-steps {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;
    gap: 20px;
    margin-top: 35px;
}

.story-step {
    min-width: 0;
    padding: 0;
    overflow: hidden;

    border: 1px solid #dfe6eb;
    border-radius: 17px;
    background: #f1f5f8;
}

.story-step > img {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.story-step-content {
    display: flex;
    gap: 18px;
    min-height: 145px;
    padding: 22px;
}
@media (max-width: 800px) {
    .story-steps {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }

    .story-step > img {
        height: 210px;
    }

    .story-step-content {
        min-height: auto;
    }
}

/* ========================================
   TARJETA DE RESUMEN
   ======================================== */

.article-summary {
    width: min(900px, calc(100% - 36px));
    margin: 15px auto 0;
    padding: 35px 40px;

    color: white;
    background: var(--blue);

    border-radius: 22px;
    box-shadow: var(--shadow);
}

.article-summary h3 {
    max-width: 750px;
    margin: 10px 0 15px;

    color: white;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    line-height: 1.2;
}

.article-summary > p {
    max-width: 700px;
    margin: 0;

    color: #d7eafa;
    font-size: 1rem;
    line-height: 1.7;
}

.article-summary .article-next {
    display: inline-block;
    margin-top: 22px;
}

@media (max-width: 800px) {
    .article-summary {
        width: calc(100% - 24px);
        margin-top: 50px;
        padding: 27px 24px;
    }

    .article-summary h3 {
        font-size: 1.65rem;
    }
}

/* Página temporal para secciones principales */

.section-placeholder {
    min-height: 520px;
    padding: 100px 0;
    background: #f6f8fa;
}

.section-placeholder h2 {
    margin: 12px 0 20px;
    color: var(--blue);
    font-size: clamp(3rem, 6vw, 5rem);
    letter-spacing: -0.045em;
}

.section-placeholder p:last-child {
    color: var(--muted);
    font-size: 1.15rem;
}

/* ========================================
   TELEWIKI
   ======================================== */

.wiki-page {
    min-height: 700px;
    background: #f5f7f9;
}

.wiki-hero {
    padding: 70px 0;
    color: white;
    background: linear-gradient(
        135deg,
        #062b4b,
        #0d568d
    );
}

.wiki-hero h2 {
    margin: 10px 0 15px;
    font-size: clamp(3rem, 7vw, 5.5rem);
    line-height: 1;
    letter-spacing: -0.05em;
}

.wiki-hero p:not(.section-kicker) {
    max-width: 750px;
    color: #d7eafa;
    font-size: 1.15rem;
    line-height: 1.7;
}

.wiki-search {
    max-width: 800px;
    height: 62px;
    margin-top: 32px;
    padding: 0 18px;

    display: flex;
    align-items: center;
    gap: 13px;

    color: var(--blue);
    background: white;
    border-radius: 14px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.16);
}

.wiki-search svg {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
}

.wiki-search input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
    font-size: 1rem;
}

.wiki-search button {
    border: 0;
    color: var(--muted);
    background: transparent;
    font-size: 1.8rem;
}

.wiki-directory {
    padding-top: 65px;
    padding-bottom: 90px;
}

.wiki-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 35px;
}

.wiki-toolbar h3 {
    margin: 8px 0 7px;
    color: var(--blue);
    font-size: clamp(2rem, 4vw, 3rem);
}

#resultsCount {
    margin: 0;
    color: var(--muted);
}

.semester-selector span {
    display: block;
    margin-bottom: 7px;
    color: var(--blue);
    font-size: 0.85rem;
    font-weight: 800;
}

.semester-selector select {
    min-width: 230px;
    padding: 12px 38px 12px 14px;
    border: 1px solid #cbd6de;
    border-radius: 10px;
    color: var(--blue);
    background: white;
    font-weight: 750;
}

.subjects-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.subject-card {
    min-width: 0;
    min-height: 215px;
    padding: 25px;

    display: flex;
    flex-direction: column;

    border: 1px solid #dce4e9;
    border-radius: 17px;
    background: white;

    transition:
        transform 0.2s,
        box-shadow 0.2s;
}

.subject-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.subject-semester {
    color: var(--red);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.subject-card h4 {
    margin: 18px 0;
    color: var(--blue);
    font-size: 1.3rem;
    line-height: 1.3;
}

.subject-footer {
    margin-top: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.subject-footer span {
    color: var(--muted);
    font-size: 0.85rem;
}

.subject-footer a {
    color: var(--red);
    font-weight: 800;
    text-decoration: none;
}

.subject-footer a:hover {
    text-decoration: underline;
}

.wiki-empty {
    padding: 60px 20px;
    border: 1px dashed #bdcad3;
    border-radius: 17px;
    color: var(--muted);
    background: white;
    text-align: center;
}

.wiki-empty strong {
    color: var(--blue);
    font-size: 1.3rem;
}

/* TELEWIKI EN CELULARES */

@media (max-width: 800px) {
    .wiki-hero {
        padding: 50px 0;
    }

    .wiki-search {
        height: 57px;
    }

    .wiki-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .semester-selector select {
        width: 100%;
    }

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

/* ========================================
   REGISTRO
   ======================================== */

.register-page {
    min-height: 700px;
    background: #f5f7f9;
}

.register-introduction {
    padding: 65px 0;
    color: white;
    background: linear-gradient(
        135deg,
        #062b4b,
        #0d568d
    );
}

.register-heading {
    max-width: 900px;
}

.register-back {
    display: inline-block;
    margin-bottom: 35px;
    color: #d7eafa;
    font-weight: 750;
    text-decoration: none;
}

.register-back:hover {
    color: white;
    text-decoration: underline;
}

.register-heading h2 {
    margin: 10px 0 17px;
    font-size: clamp(3rem, 7vw, 5rem);
    line-height: 1;
    letter-spacing: -0.05em;
}

.register-heading > p:last-child {
    max-width: 750px;
    margin: 0;
    color: #d7eafa;
    font-size: 1.15rem;
    line-height: 1.7;
}

.register-container {
    max-width: 950px;
    padding-top: 60px;
    padding-bottom: 90px;
}

.register-form {
    padding: 45px;
    border: 1px solid #dce4e9;
    border-radius: 22px;
    background: white;
    box-shadow: var(--shadow);
}

.form-demo-warning {
    margin-bottom: 40px;
    padding: 18px 20px;
    border-left: 5px solid #d29a00;
    border-radius: 10px;
    color: #66500e;
    background: #fff5d8;
}

.form-demo-warning p {
    margin: 7px 0 0;
    line-height: 1.5;
}

.register-form fieldset {
    margin: 0;
    padding: 35px 0;
    border: 0;
    border-bottom: 1px solid #e0e7eb;
}

.register-form legend {
    padding: 0;
    color: var(--blue);
    font-size: 1.4rem;
    font-weight: 850;
}

.form-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 25px;
}

.form-field {
    min-width: 0;
}

.form-field-full {
    grid-column: 1 / -1;
}

.form-field span {
    display: block;
    margin-bottom: 8px;
    color: var(--blue);
    font-weight: 800;
}

.form-field input,
.form-field select {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #c7d3dc;
    border-radius: 9px;
    color: var(--ink);
    background: white;
    font: inherit;
}

.form-field input:focus,
.form-field select:focus {
    border-color: var(--blue-2);
    outline: 3px solid rgba(13, 86, 141, 0.14);
}

.form-field small {
    display: block;
    margin-top: 7px;
    color: var(--muted);
}

.verification-information p {
    max-width: 700px;
    color: var(--muted);
    line-height: 1.65;
}

.file-upload {
    margin-top: 22px;
    padding: 35px 20px;

    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;

    border: 2px dashed #adc0ce;
    border-radius: 15px;
    color: var(--blue);
    background: #f4f8fa;
    cursor: pointer;
}

.file-upload:hover {
    border-color: var(--red);
}

.file-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.file-upload-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: white;
    background: var(--red);
    font-size: 1.5rem;
    font-weight: 900;
}

.file-upload small {
    color: var(--muted);
}

.privacy-consent {
    display: flex;
    gap: 12px;
    margin: 28px 0;
    color: var(--muted);
    line-height: 1.5;
}

.privacy-consent input {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

.register-submit {
    font-size: 1rem;
}

.form-error {
    padding: 13px;
    border-radius: 8px;
    color: #8b1116;
    background: #ffe2e3;
}

.registration-success {
    padding: 55px;
    border-radius: 22px;
    background: white;
    box-shadow: var(--shadow);
    text-align: center;
}

.success-symbol {
    width: 65px;
    height: 65px;
    margin: 0 auto 25px;

    display: grid;
    place-items: center;

    border-radius: 50%;
    color: white;
    background: #198754;
    font-size: 2rem;
    font-weight: 900;
}

.registration-success h2 {
    margin: 10px 0 15px;
    color: var(--blue);
}

.registration-success > p {
    max-width: 600px;
    margin: 0 auto 25px;
    color: var(--muted);
    line-height: 1.7;
}

/* REGISTRO EN CELULARES */

@media (max-width: 800px) {
    .register-introduction {
        padding: 50px 0;
    }

    .register-container {
        padding-top: 30px;
        padding-bottom: 60px;
    }

    .register-form {
        padding: 25px 20px;
    }

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

    .form-field-full {
        grid-column: auto;
    }

    .registration-success {
        padding: 38px 24px;
    }
}

.register-link {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #dbe2e7;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.92rem;
}

.register-link a {
  color: var(--red);
  font-weight: 800;
  text-decoration: none;
}

.register-link a:hover {
  text-decoration: underline;
}

@media (max-width: 500px) {
  .register-link {
    flex-direction: column;
    gap: 3px;
  }
}

.confirmation-page {
  min-height: calc(100vh - 150px);
  display: flex;
  align-items: center;
  padding: 70px 0;
}

.confirmation-card {
  max-width: 850px;
  margin: auto;
}

.confirmation-card h1 {
  color: var(--blue);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  margin: 18px 0;
}

.account-status {
  max-width: 430px;
  margin: 28px auto;
  padding: 18px 22px;
  border: 1px solid #f0c36d;
  border-radius: 12px;
  background: #fff4d9;
  color: #745700;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}

.account-status p {
  margin: 3px 0 0;
  color: #745700;
}

.status-dot {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  border-radius: 50%;
  background: #e3a008;
  box-shadow: 0 0 0 5px rgba(227, 160, 8, 0.18);
}

.review-note {
  max-width: 650px;
  margin: 0 auto 28px;
}

.confirmation-home {
  display: inline-block;
  text-decoration: none;
}

@media (max-width: 600px) {
  .confirmation-page {
    padding: 35px 0;
  }

  .confirmation-card {
    padding: 30px 22px;
  }
}

.moderation-page {
  min-height: 75vh;
  background: var(--soft);
  padding: 65px 0 80px;
}

.moderation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  margin-bottom: 32px;
}

.moderation-header h1 {
  color: var(--blue);
  font-size: clamp(2rem, 5vw, 3.4rem);
  margin: 8px 0;
}

.moderation-header p {
  color: var(--muted);
}

.moderation-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}

.moderation-summary article {
  background: white;
  padding: 22px;
  border: 1px solid #dbe2e7;
  border-radius: 15px;
}

.moderation-summary strong {
  display: block;
  color: var(--blue);
  font-size: 2rem;
}

.moderation-summary span {
  color: var(--muted);
}

.requests-list {
  display: grid;
  gap: 20px;
}

.request-card {
  background: white;
  padding: 26px;
  border: 1px solid #dbe2e7;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(8, 59, 102, 0.08);
}

.request-main {
  display: flex;
  align-items: center;
  gap: 16px;
}

.request-main h2 {
  color: var(--blue);
  margin: 7px 0 3px;
}

.request-main p {
  color: var(--muted);
  margin: 0;
}

.request-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 850;
}

.request-status {
  color: #8a6200;
  background: #fff4d9;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.request-data {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px 25px;
  margin: 24px 0;
  padding: 18px;
  background: var(--soft);
  border-radius: 12px;
}

.request-data p {
  margin: 5px 0;
}

.request-document,
.request-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.request-actions {
  justify-content: flex-end;
  margin-top: 25px;
}

.reject-request {
  border: 1px solid var(--red);
  border-radius: 10px;
  background: white;
  color: var(--red);
  padding: 12px 18px;
  font-weight: 800;
}

.request-approved {
  border-color: #168b56;
  opacity: 0.72;
}

.request-rejected {
  border-color: var(--red);
  opacity: 0.62;
}

.empty-requests {
  padding: 35px;
  background: white;
  border-radius: 15px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 700px) {
  .moderation-header,
  .request-document {
    align-items: flex-start;
    flex-direction: column;
  }

  .moderation-summary {
    grid-template-columns: 1fr;
  }

  .request-data {
    grid-template-columns: 1fr;
  }
}

.account-menu {
  position: absolute;
  z-index: 50;
  top: 82px;
  right: 0;
  width: 260px;
  overflow: hidden;
  border: 1px solid #dbe2e7;
  border-radius: 15px;
  background: white;
  color: var(--ink);
  box-shadow: 0 18px 45px rgba(4, 25, 42, 0.25);
}

.account-menu[hidden] {
  display: none;
}

.account-menu-header {
  padding: 18px;
  border-bottom: 1px solid #e0e7eb;
}

.account-menu-header strong,
.account-menu-header span {
  display: block;
}

.account-menu-header strong {
  color: var(--blue);
}

.account-menu-header span {
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  text-overflow: ellipsis;
}

.account-menu button,
.account-menu a {
  width: 100%;
  display: block;
  border: 0;
  background: white;
  color: var(--blue);
  padding: 13px 18px;
  text-align: left;
  text-decoration: none;
  font-weight: 750;
}

.account-menu button:hover,
.account-menu a:hover {
  background: var(--soft);
}

.account-menu .logout-option {
  border-top: 1px solid #e0e7eb;
  color: var(--red);
}

@media (max-width: 800px) {
  .account-menu {
    top: 70px;
    right: 0;
    width: min(260px, calc(100vw - 24px));
  }
}

.profile-page {
  min-height: 75vh;
  padding: 65px 0 80px;
  background: var(--soft);
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.profile-header h1 {
  color: var(--blue);
  font-size: clamp(2rem, 5vw, 3.3rem);
  margin: 5px 0;
}

.profile-header p {
  color: var(--muted);
  margin: 0;
}

.profile-header .secondary {
  margin-left: auto;
}

.profile-avatar {
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  font-size: 2rem;
  font-weight: 900;
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 22px;
  align-items: start;
}

.profile-card {
  padding: 28px;
  border: 1px solid #dbe2e7;
  border-radius: 18px;
  background: white;
  box-shadow: 0 12px 35px rgba(8, 59, 102, 0.08);
}

.profile-card h2 {
  color: var(--blue);
  margin: 7px 0 20px;
}

.profile-card-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.profile-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.profile-fields label {
  color: var(--blue);
  font-weight: 750;
}

.profile-fields input,
.profile-fields select {
  width: 100%;
  margin-top: 7px;
  padding: 12px;
  border: 1px solid #c7d2da;
  border-radius: 9px;
  background: white;
  font: inherit;
}

.profile-fields input:disabled,
.profile-fields select:disabled {
  color: var(--muted);
  background: var(--soft);
}

.profile-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 25px;
}

.profile-message {
  margin-top: 20px;
  padding: 12px;
  border-radius: 9px;
  background: #e5f6ed;
  color: #157347;
  font-weight: 750;
}

.profile-sidebar {
  display: grid;
  gap: 22px;
}

.profile-status-row {
  display: flex;
  justify-content: space-between;
  padding: 13px 0;
  border-top: 1px solid #e0e7eb;
}

.verified-label {
  color: #168b56;
}

.contribution-number {
  color: var(--red);
  font-size: 2.5rem;
}

.profile-link {
  display: inline-block;
  margin-top: 12px;
  text-decoration: none;
}

@media (max-width: 800px) {
  .profile-layout,
  .profile-fields {
    grid-template-columns: 1fr;
  }

  .profile-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .profile-header .secondary {
    width: 100%;
    margin-left: 0;
  }
}

.wiki-review-section {
  margin-top: 55px;
}

.wiki-review-section h2 {
  color: var(--blue);
}

.wiki-proposal-card {
  margin-top: 18px;
  padding: 26px;
  border: 1px solid #dbe2e7;
  border-radius: 18px;
  background: white;
}

.wiki-proposal-card h3 {
  margin-top: 0;
  color: var(--blue);
}

.wiki-proposal-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}

.wiki-proposal-comparison > div {
  min-width: 0;
  padding: 18px;
  border-radius: 12px;
  background: var(--soft);
}

.wiki-proposal-comparison p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .wiki-proposal-comparison {
    grid-template-columns: 1fr;
  }
}

/* Materias de Telewiki */

.wiki-article-page {
  min-height: 75vh;
  padding: 55px 0 80px;
  background: #f3f6f8;
}

.wiki-back {
  display: inline-block;
  margin-bottom: 30px;
  color: var(--red);
  font-weight: 800;
  text-decoration: none;
}

.wiki-back:hover {
  text-decoration: underline;
}

.wiki-article-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  margin-bottom: 35px;
}

.wiki-article-header h1 {
  max-width: 900px;
  margin: 8px 0 15px;
  color: var(--blue);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.08;
}

.wiki-article-header p:not(.section-kicker) {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.wiki-article-header .primary {
  flex-shrink: 0;
}

.wiki-article-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}

.wiki-index {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px;
  border: 1px solid #dbe2e7;
  border-radius: 16px;
  background: #fff;
}

.wiki-index strong {
  margin-bottom: 10px;
  color: var(--blue);
}

.wiki-index a {
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.35;
}

.wiki-index a:hover {
  color: var(--red);
  background: var(--soft);
}

.wiki-content {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.wiki-content > section {
  padding: 30px;
  border: 1px solid #dbe2e7;
  border-radius: 16px;
  background: #fff;
}

.wiki-content h2 {
  margin: 0 0 16px;
  color: var(--blue);
}

.wiki-content p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.wiki-permission-message {
  padding: 16px 20px;
  border-radius: 12px;
  background: #fff4d9;
  color: #745700;
  font-weight: 750;
}

.wiki-permission-message.permission-allowed {
  background: #e5f6ed;
  color: #157347;
}

.concept-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.concept-grid article {
  padding: 20px;
  border-radius: 12px;
  background: var(--soft);
}

.concept-grid strong {
  display: block;
  margin-bottom: 8px;
  color: var(--blue);
}

.wiki-editor {
  width: min(700px, calc(100vw - 40px));
  padding: 30px;
}

.wiki-editor h2 {
  color: var(--blue);
}

.wiki-editor label {
  display: block;
  margin: 18px 0 7px;
  color: var(--blue);
  font-weight: 800;
}

.wiki-editor textarea {
  width: 100%;
  padding: 13px;
  border: 1px solid #c7d2da;
  border-radius: 9px;
  resize: vertical;
  font: inherit;
  line-height: 1.5;
}

.editor-error {
  color: var(--red);
  font-weight: 750;
}

@media (max-width: 800px) {
  .wiki-article-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .wiki-article-layout {
    grid-template-columns: 1fr;
  }

  .wiki-index {
    position: static;
  }

  .concept-grid {
    grid-template-columns: 1fr;
  }
}

/* Ventana del editor de Telewiki */
#articleEditorDialog {
  width: min(820px, calc(100vw - 32px));
  max-width: none;
  max-height: min(85vh, 900px);
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 20px;
}

#articleEditorDialog .wiki-editor {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: clamp(20px, 4vw, 36px);
  box-sizing: border-box;
}

#articleEditorDialog .wiki-editor > * {
  max-width: 100%;
}

#articleEditorDialog textarea,
#articleEditorDialog select {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font: inherit;
}

#articleEditorDialog #articleEditor {
  min-height: 220px;
  resize: vertical;
}

#articleEditorDialog .modal-actions {
  flex-wrap: wrap;
}

#articleEditorDialog input,
#articleEditorDialog textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font: inherit;
}

#articleEditorDialog input {
  padding: 13px;
  border: 1px solid #c7d2da;
  border-radius: 9px;
}

.wiki-topic {
  margin-bottom: 24px;
}

.wiki-topic-body p {
  white-space: pre-wrap;
}

.wiki-topic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

#wikiTopicIndex {
  display: grid;
  gap: 12px;
}

.wiki-proposal-comparison p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.wiki-proposal-card {
  overflow-wrap: anywhere;
}


/* Comunidad */
.community-page { padding-top: clamp(34px, 5vw, 76px); padding-bottom: 90px; max-width: 920px; }
.community-heading h2 { font-size: clamp(36px, 6vw, 64px); margin: 4px 0; color: #12375a; }
.community-heading { margin-bottom: 28px; }
.community-card { display: block; padding: clamp(20px, 3vw, 32px); margin: 0 0 22px; border: 1px solid #d7e1eb; background: #fff; border-radius: 20px; box-shadow: 0 8px 24px rgba(16, 49, 78, .04); }
.community-card textarea, .community-profile-editor textarea { display: block; width: 100%; box-sizing: border-box; font: inherit; line-height: 1.5; padding: 12px; border: 1px solid #c7d2da; border-radius: 10px; resize: vertical; margin: 10px 0; }
.community-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.community-author { display: flex; align-items: center; gap: 12px; min-width: 0; }
.community-author strong, .community-author small, .community-author time { display: block; overflow-wrap: anywhere; }
.community-author small, .community-author time { color: #607185; font-size: .86rem; }
.community-avatar { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; background: #12375a; color: white; display: grid; place-items: center; overflow: hidden; font-weight: 800; }
.community-avatar img, .profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.community-content, .community-comment p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.community-reactions { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid #e1e7ed; padding-bottom: 16px; }
.community-reactions button { border: 1px solid #d1dbe4; background: white; padding: 8px 12px; border-radius: 99px; cursor: pointer; color: #12375a; font: inherit; }
.community-reactions button.selected { background: #e4f2ee; border-color: #258567; }
.community-comments h3 { font-size: 1.1rem; margin: 18px 0; }
.community-comment { padding: 12px 0; border-bottom: 1px solid #edf1f5; }
.community-reply { display: flex; align-items: end; gap: 10px; margin-top: 15px; }
.community-reply textarea { flex: 1; min-width: 0; }
.community-profile-editor label { display: block; margin-top: 12px; font-weight: 700; }
.community-profile-editor .community-remove-photo { font-weight: 400; }
.community-profile-editor button { margin-top: 14px; }
@media(max-width: 600px) { .community-reply { display: block; } .community-reply button { margin-top: 8px; } }

/* Imágenes de publicaciones y respuestas */
.community-attachment { display: block; max-width: 100%; max-height: 650px; width: auto; height: auto; margin: 12px 0 20px; border-radius: 12px; object-fit: contain; background: #f3f7fa; }
.community-image-preview { margin: 10px 0; }
.community-image-preview img { display: block; max-width: 220px; max-height: 180px; object-fit: contain; border-radius: 10px; margin-bottom: 8px; }
.community-reply-controls { display: grid; align-content: center; gap: 8px; }
.community-file-label { display: block; font-weight: 600; font-size: .9rem; }
.community-file-label input { display: block; max-width: 200px; font-size: .82rem; }
.community-reply-controls .community-image-preview img { max-width: 140px; max-height: 100px; }
@media (max-width: 600px) { .community-reply-controls { margin-top: 8px; } }

/* Edición y revisión de Comunidad */
.community-content-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 14px; }
.community-text-button { border: 0; background: none; padding: 4px 0; color: #a71c22; font: inherit; font-weight: 700; cursor: pointer; }
.community-text-button:hover { text-decoration: underline; }
.community-edited { display: block; color: #68798a; }
.community-inline-form, .community-report-form { border: 1px solid #d7e1eb; border-radius: 12px; background: #f6f9fc; padding: 16px; margin: 12px 0; }
.community-inline-form textarea, .community-report-form textarea, .community-report-form select { display: block; box-sizing: border-box; width: 100%; margin: 8px 0 12px; padding: 10px; font: inherit; border: 1px solid #c7d2da; border-radius: 8px; }
.community-inline-form button, .community-report-form button, .community-report-card button { margin: 4px 10px 4px 0; }
.community-remove-image { display: block; margin: 12px 0; }
.community-report-card .community-content { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Lectura y reportes de Comunidad */
.community-page [hidden] { display: none !important; }
.community-featured-label { display: inline-block; padding: 6px 12px; margin-bottom: 16px; border-radius: 99px; color: #88451a; background: #fff2d8; font-size: .9rem; font-weight: 800; }
.community-comment-like, .community-show-more { background: none; border: 0; color: #12375a; cursor: pointer; font: inherit; font-weight: 700; padding: 7px 0; }
.community-comment-like.selected { color: #b82028; }
.community-show-more { display: block; margin: 12px 0; color: #b82028; }
.community-show-more:hover, .community-comment-like:hover { text-decoration: underline; }
.community-report-form label { display: block; font-weight: 800; color: #12375a; }
.community-report-success { margin: 8px 0 14px; padding: 10px 14px; background: #e5f5ed; color: #176540; border-radius: 9px; font-weight: 700; }
.community-report-feedback { color: #a71c22; font-weight: 700; margin: 6px 0 0; }

/* Divulgación e investigación */
.editorial-page { padding-top: clamp(38px, 6vw, 80px); padding-bottom: 90px; min-height: 50vh; }
.editorial-page [hidden], .editorial-dialog [hidden] { display: none !important; }
.editorial-header { max-width: 800px; margin-bottom: 36px; }
.editorial-header h2 { color: var(--blue); font-size: clamp(2.3rem, 5vw, 4rem); margin: 8px 0 12px; }
.editorial-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 24px; }
.editorial-toolbar label { font-weight: 750; color: var(--blue); }
.editorial-toolbar input { flex: 1 1 210px; }
.editorial-toolbar input, .editorial-toolbar select, .editorial-form input, .editorial-form select, .editorial-form textarea { font: inherit; padding: 12px; border: 1px solid #cbd8e3; border-radius: 10px; max-width: 100%; box-sizing: border-box; }
.editorial-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 20px; }
.editorial-card { padding: 26px; border: 1px solid #dbe2e7; border-radius: 18px; background: white; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.editorial-card h3 { color: var(--blue); font-size: 1.5rem; margin: 0; }
.editorial-card p { margin: 0; }
.editorial-card small { color: #536576; }
.editorial-card button { margin-top: auto; }
.editorial-mine { margin-top: 48px; border-top: 1px solid #dbe2e7; padding-top: 22px; }
.editorial-dialog { width: min(760px, calc(100vw - 32px)); max-width: none; max-height: 85vh; padding: 0; border: 0; border-radius: 18px; overflow-y: auto; }
.editorial-dialog::backdrop { background: rgb(9 30 48 / 65%); }
.editorial-form { padding: clamp(20px, 4vw, 36px); display: grid; gap: 12px; min-width: 0; }
.editorial-form h2 { margin: 0; color: var(--blue); }
.editorial-form label { font-weight: 800; color: var(--blue); }
.editorial-form textarea { width: 100%; resize: vertical; }
.editorial-body, .editorial-review-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
#editorialError { color: #b82028; }
.editorial-blocks { display: grid; gap: 15px; }
.editorial-edit-block { display: grid; gap: 9px; padding: 15px; background: #f5f9fc; border: 1px solid #d5e0eb; border-radius: 12px; min-width: 0; }
.editorial-block-controls, .editorial-block-add, .editorial-mine-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.editorial-block-controls button { font-size: .9rem; padding: 7px 10px; }
.editorial-block-add { margin: 8px 0 14px; }
.editorial-image-preview { width: min(100%, 340px); max-height: 260px; object-fit: contain; }
.editorial-image-preview[hidden] { display: none !important; }
.editorial-body figure, .wiki-proposal-card figure { margin: 20px 0; }
.editorial-body img, .wiki-proposal-card figure img { display: block; max-width: 100%; max-height: 600px; object-fit: contain; border-radius: 10px; }
.editorial-body figcaption, .wiki-proposal-card figcaption { margin-top: 8px; color: #536576; }
.editorial-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.editorial-mine-row { padding: 8px 0; border-bottom: 1px solid #dbe2e7; }
.editorial-mine-row span { flex: 1; }

/* Recursos PDF integrados */
.wiki-resources{display:grid;gap:18px;margin:16px 0 24px}.wiki-resource{padding:15px;border:1px solid #dbe2e7;border-radius:12px;background:#fff}.wiki-resource>a{display:inline-block;margin-bottom:12px;color:#083b66;font-weight:700}.wiki-resource iframe{display:block;width:100%;height:500px;max-height:65vh;border:1px solid #dbe2e7;border-radius:8px;background:#f5f7f9}@media(max-width:800px){.wiki-resource iframe{height:420px;max-height:60vh}}

.subject-card[role="link"]{cursor:pointer}.subject-card:focus-visible{outline:3px solid #c71920;outline-offset:3px}

/* TeleWiki: toda la tarjeta funciona como enlace */
a.subject-card {text-decoration:none;color:inherit;cursor:pointer;}
a.subject-card:focus-visible {outline:3px solid #c71920;outline-offset:3px;}
.subject-footer strong {color:var(--red);font-weight:800;}
.wiki-resource iframe {height:520px;max-height:65vh;}
.wiki-empty-course {padding:28px;border:1px dashed #c8d2da;border-radius:14px;background:#fff;}

/* Lector PDF compacto, con navegación y scroll interno */
.wiki-resource iframe{height:390px;max-height:55vh;}
@media(max-width:800px){.wiki-resource iframe{height:330px;max-height:50vh;}}


/* TeleWEB 16: modal de descripción y límites de lectura restaurados */
#descriptionDialog {
  box-sizing: border-box;
  width: min(760px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: min(85vh, 760px);
  overflow-x: hidden;
  overflow-y: auto;
}
#descriptionDialog .wiki-editor {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 28px;
}
#descriptionDialog .wiki-editor > *,
#descriptionDialog textarea {box-sizing:border-box;max-width:100%;min-width:0;}
#descriptionDialog .modal-actions {display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;}
.wiki-article-page, .wiki-article-page .shell,
.wiki-article-layout, .wiki-content, #wikiTopics,
.wiki-topic, .wiki-resources, .wiki-resource {min-width:0;max-width:100%;}
.wiki-topic p, .wiki-topic h2, .wiki-topic h3,
.wiki-resource a, #courseDescription {overflow-wrap:anywhere;word-break:normal;}
.wiki-resource {box-sizing:border-box;overflow:hidden;}
/* Altura del lector de la versión 14, con ancho contenido */
.wiki-resource iframe {box-sizing:border-box;display:block;width:100%;max-width:100%;height:520px;max-height:65vh;border:1px solid #dbe2e7;border-radius:8px;background:#f5f7f9;}
@media(max-width:800px){
 #descriptionDialog .wiki-editor{padding:20px;}
 .wiki-resource iframe{height:420px;max-height:60vh;}
}

/* TeleWEB 17: editor, unidades e historial */
.wiki-toolbar{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 10px}.wiki-toolbar button{border:1px solid #cad6df;background:#f7f9fc;color:#083b66;border-radius:7px;padding:8px 11px;cursor:pointer}
.wiki-markdown{min-width:0;overflow-wrap:anywhere}.wiki-markdown p{white-space:pre-wrap}.wiki-markdown img{display:block;max-width:100%;max-height:460px;object-fit:contain;margin:12px auto;border-radius:8px}.wiki-markdown .wiki-formula{white-space:pre-wrap;overflow-wrap:anywhere;background:#f0f4f7;padding:2px 5px}
.wiki-unit-heading{border-bottom:1px solid #dbe3e9;padding-bottom:9px;margin-top:32px}.wiki-unit-index{display:block;margin:16px 0 7px;color:#0b3b63}.wiki-resource-hint{font-size:12px;color:#637587}
.wiki-history-dialog{border:0;border-radius:16px;max-width:min(780px,92vw);max-height:85vh;width:100%;padding:0}.wiki-history-content{padding:24px;max-width:100%;overflow:auto}.wiki-history-content pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:55vh;overflow:auto}

/* TeleWEB 18: tablas reales y biblioteca por materia */
.wiki-table-scroll{max-width:100%;overflow-x:auto;margin:14px 0 22px;border:1px solid #d6e1e9;border-radius:10px}
.wiki-table{border-collapse:collapse;width:100%;min-width:320px;background:white;font-size:.96rem}
.wiki-table th,.wiki-table td{padding:11px 15px;border-bottom:1px solid #dbe3e9;text-align:left;overflow-wrap:anywhere}
.wiki-table th{background:#edf3f7;color:#083b66;font-weight:750}.wiki-table tbody tr:last-child td{border-bottom:0}
.wiki-markdown .wiki-formula{background:transparent;padding:0}
.wiki-library-dialog{box-sizing:border-box;width:min(850px,calc(100vw - 28px));max-width:calc(100vw - 28px);max-height:85vh;border:0;border-radius:17px;padding:0;overflow:auto}
.wiki-library-dialog::backdrop{background:rgba(8,29,47,.67)}
.wiki-library-panel{box-sizing:border-box;padding:clamp(18px,4vw,32px);min-width:0}
.wiki-library-head,.wiki-library-filters,.wiki-library-card,.wiki-library-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.wiki-library-head{justify-content:space-between;align-items:flex-start}.wiki-library-head h2{color:#083b66;margin:5px 0}
.wiki-library-filters{margin:22px 0}.wiki-library-filters input{flex:1 1 220px;min-width:0}.wiki-library-filters select{flex:0 1 160px}
.wiki-library-filters input,.wiki-library-filters select{padding:11px;border:1px solid #ccd9e3;border-radius:9px;max-width:100%}
.wiki-library-items{display:grid;gap:10px;min-width:0}.wiki-library-card{justify-content:space-between;padding:15px;border:1px solid #dbe3e9;border-radius:12px;background:#fafdff;min-width:0}
.wiki-library-info{display:grid;gap:5px;min-width:0;overflow-wrap:anywhere}.wiki-library-info strong{color:#083b66}.wiki-library-info small,.wiki-library-note{color:#5a6c7b}
.wiki-library-actions a{color:#083b66;font-weight:700}.wiki-library-actions button{padding:8px 11px}
.wiki-library-empty{padding:18px;background:#f3f7fa;border-radius:10px}.wiki-library-note{margin-top:20px;font-size:.9rem}

/* TeleWEB-19: edición visual y borradores */
.wiki-edit-modes,.wiki-editor-preview{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:10px 0}
.wiki-edit-modes button[aria-pressed="true"]{background:#073a65;color:white;border-color:#073a65}
#draftStatus{font-size:.8rem;color:#52677b;margin-left:auto}
.wiki-visual-editor{box-sizing:border-box;min-height:235px;max-height:55vh;overflow:auto;background:white;border:1px solid #c5d3df;border-radius:9px;padding:16px;line-height:1.65;outline:none;overflow-wrap:anywhere}
.wiki-visual-editor:focus{border-color:#528bde;box-shadow:0 0 0 3px #528bde55}
.wiki-visual-editor:empty:before{content:attr(data-placeholder);color:#8090a0}
.wiki-visual-editor img{max-width:100%;height:auto}
.wiki-visual-editor table{width:100%;border-collapse:collapse}
.wiki-visual-editor td,.wiki-visual-editor th{border:1px solid #c5d3df;padding:8px}
.wiki-preview{border:1px solid #d4dfe7;border-radius:9px;padding:14px;max-height:280px;overflow:auto}
#articleEditor[hidden],#visualEditor[hidden],#editorPreview[hidden]{display:none!important}

/* Biblioteca avanzada */
.wiki-library-filters select{flex:1 1 145px;min-width:120px}
#libraryAdd{margin-top:18px}
#libraryResourceDialog{box-sizing:border-box;width:min(720px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:88vh;border:0;border-radius:16px;padding:0;overflow:auto}
#libraryResourceDialog .wiki-editor{width:100%;max-width:100%;box-sizing:border-box}
#libraryResourceDialog input,#libraryResourceDialog select,#libraryResourceDialog textarea{box-sizing:border-box;max-width:100%;width:100%}
.wiki-library-card{align-items:flex-start}

/* TeleWEB 21.1: buscador global en formato horizontal */
.wiki-global-results{margin-top:28px;margin-bottom:32px}
.wiki-global-heading h3{margin:8px 0 10px}
.wiki-global-filters{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:20px 0}
.wiki-global-filters label{font-weight:700;color:#103b60}
.wiki-global-filters select{min-width:180px;padding:11px 14px;border:1px solid #c9d4dd;border-radius:10px;background:#fff;color:#103b60;font:inherit}
.wiki-global-cards{display:flex;flex-direction:column;gap:14px;width:100%}
.wiki-global-card{display:block;width:100%;box-sizing:border-box;background:white;border:1px solid #d9e2ea;border-radius:16px;padding:22px 26px;text-decoration:none;color:#153b5d;box-shadow:0 10px 26px rgba(14,47,77,.05);transition:border-color .15s,transform .15s}
.wiki-global-card:hover,.wiki-global-card:focus-visible{border-color:#11699a;transform:translateY(-1px)}
.wiki-global-meta{color:#bd111a;font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.wiki-global-card h4{font-size:1.25rem;margin:10px 0;color:#123c60}
.wiki-global-card p{margin:0;line-height:1.55;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.wiki-global-card mark{background:#fff0a8;color:inherit;border-radius:3px;padding:0 2px}
@media(max-width:640px){.wiki-global-card{padding:18px}.wiki-global-filters{align-items:stretch;flex-direction:column}.wiki-global-filters select{width:100%}}

/* TeleWEB 22: comparación de versiones */
.wiki-history-dialog{max-width:min(1050px,96vw);max-height:92vh}.wiki-history-content{padding:clamp(16px,3vw,30px)}.wiki-history-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:18px 0}.wiki-history-labels{display:flex;gap:12px;flex:1;flex-wrap:wrap}.wiki-history-labels label{display:flex;flex-direction:column;gap:6px;min-width:220px;flex:1;font-weight:600}.wiki-history-labels select{width:100%;max-width:100%;padding:9px}.wiki-history-diff{max-height:52vh;overflow:auto;border:1px solid #d8e0e9;border-radius:10px;padding:14px}.wiki-diff-lines{font:13px/1.55 ui-monospace,SFMono-Regular,monospace;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}.wiki-diff-lines span{display:block}.wiki-diff-add{background:#dcfce7;color:#14532d}.wiki-diff-del{background:#fee2e2;color:#7f1d1d}.wiki-history-notice{font-size:13px;color:#546579}

/* TeleWEB 23.1: enlaces de perfiles y publicaciones */
.community-author .community-avatar { display:flex; flex-shrink:0; text-decoration:none; cursor:pointer; }
.community-author .community-avatar:hover, .community-author a:hover { opacity:.8; }
.community-permalink {display:inline-block; font-size:.88rem; font-weight:700; margin:.3rem 0 .7rem; color:#0c4a76; text-decoration:underline; text-underline-offset:3px;}
.community-permalink:focus-visible,.community-author a:focus-visible {outline:3px solid #d01b24;outline-offset:3px;}

.community-clickable {cursor:pointer;} .community-clickable:hover {border-color:#b8cddd;}

/* TeleWEB 23.2 — Perfiles y Comunidad */
.community-me {margin:0 0 12px;border:1px solid #d7e1eb;background:#fff;border-radius:18px;padding:12px 20px;}
.community-me[hidden]{display:none!important;}
.community-me-identity {display:flex;align-items:center;gap:13px;text-decoration:none!important;color:#12375a!important;border-radius:12px;padding:4px;}
.community-me-identity:hover {background:#f1f6fa;}
.community-me-details {display:grid;gap:2px;min-width:0;}
.community-me-details strong {font-weight:800;font-size:1rem;}
.community-me-details small {color:#61748a;font-size:.84rem;}
.community-me-arrow {margin-left:auto;font-size:1.2rem;color:#56738d;}
.community-author a:not(.community-avatar) {color:#12375a!important;font-weight:800;text-decoration:none!important;}
.community-author a:not(.community-avatar):hover {color:#c71922!important;text-decoration:underline!important;}
.community-avatar {text-decoration:none!important;}
.community-clickable {transition:border-color .18s,box-shadow .18s;}
.community-clickable:hover {border-color:#93b2c9;box-shadow:0 10px 26px rgba(15,48,80,.09);}
.community-clickable:focus-visible {outline:3px solid #b51622;outline-offset:3px;}
.community-profile-editor {margin-bottom:24px;}
.community-profile-editor form {display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;align-items:start;}
.community-profile-editor form>label,.community-profile-editor form>input,.community-profile-editor form>textarea,.community-profile-editor form>select,.community-profile-editor form>small {min-width:0;}
.community-profile-editor form>label[for="communityBio"],.community-profile-editor form>#communityBio,.community-profile-editor form>#communityProfileMessage,.community-profile-editor form>button {grid-column:1/-1;}
.community-profile-editor form>input[type=file] {width:100%;}
.profile-visual-preview {position:relative;min-height:210px;margin:18px 0 20px;border:1px solid #d7e1eb;border-radius:16px;overflow:hidden;padding:115px 20px 16px;display:flex;align-items:end;gap:12px;flex-wrap:wrap;background:#fff;box-sizing:border-box;}
.profile-banner-preview {position:absolute;inset:0 0 auto;height:145px;background:linear-gradient(110deg,#17416b,#428aaa);background-size:cover;background-position:center;}
.profile-photo-preview {position:relative;z-index:1;width:76px;height:76px;flex:0 0 76px;border:4px solid #fff;border-radius:50%;background:#12375a;color:#fff;display:grid;place-items:center;font-size:2rem;font-weight:800;overflow:hidden;}
.profile-photo-preview img {width:100%;height:100%;object-fit:cover;}
#communityNamePreview,#communityEmojiPreview {position:relative;z-index:1;margin-bottom:8px;}
#communityNamePreview {font-size:1.12rem;overflow-wrap:anywhere;}
#communityEmojiPreview {font-size:1.5rem;}
@media(max-width:680px){.community-profile-editor form {display:block;}.community-profile-editor form>input,.community-profile-editor form>select {max-width:100%;}.profile-visual-preview {padding-top:125px;}}

/* TeleWEB 23.3: perfil público editable como sección principal */
.profile-page .community-profile-editor {display:block;}
.community-profile-editor {width:100%;margin:0 0 26px;box-sizing:border-box;}
.community-profile-editor form {display:flex;flex-direction:column;gap:8px;}
.community-profile-editor form>input,.community-profile-editor form>textarea,.community-profile-editor form>select {width:100%;max-width:100%;box-sizing:border-box;}
.community-profile-editor form>input[type=file] {padding:10px;border:1px solid #cbd5df;border-radius:10px;}
.community-profile-editor form>button {align-self:flex-start;}
.profile-visual-preview {min-height:250px;}
.thread-heading {display:flex;align-items:center;gap:14px;}
.thread-heading h2 {margin:0;}
.thread-back {display:grid;place-items:center;width:44px;height:44px;border:1px solid #d4dfe8;border-radius:50%;text-decoration:none!important;color:#083b66!important;font-size:28px;font-weight:700;background:white;}
.thread-back:hover,.thread-back:focus-visible {background:#edf4fa;}

/* Perfil 23.4: editor visible en el panel de presentación */
.profile-sidebar .community-profile-editor{display:block!important;width:100%;padding:26px;box-sizing:border-box;margin-bottom:22px;}
.profile-sidebar .community-profile-editor form{display:flex;flex-direction:column;gap:8px;}
.profile-sidebar .community-profile-editor input:not([type=checkbox]),.profile-sidebar .community-profile-editor select,.profile-sidebar .community-profile-editor textarea{display:block;width:100%;max-width:100%;box-sizing:border-box;}
.profile-sidebar .profile-visual-preview{min-height:170px;padding:105px 12px 12px;}
.profile-sidebar .community-profile-editor label{display:block;margin-top:12px;}
.profile-sidebar .community-profile-editor button{width:100%;}

/* paginaTele: editor público destacado, visible antes de los datos privados */
.profile-page #editar-presentacion{display:block!important;max-width:1225px;margin:22px auto!important;padding:28px!important;box-sizing:border-box;width:calc(100% - 32px);}
.profile-page #editar-presentacion form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;}
.profile-page #editar-presentacion form>textarea,.profile-page #editar-presentacion form>button,.profile-page #editar-presentacion form>[role=status]{grid-column:1/-1;}
.profile-page #editar-presentacion .profile-visual-preview{min-height:210px;}
@media(max-width:720px){.profile-page #editar-presentacion form{display:flex;flex-direction:column;}}

/* paginaTele: alineación consistente de los controles del perfil */
.profile-page #editar-presentacion form{display:flex;flex-direction:column;gap:18px}
.profile-page #editar-presentacion form>.profile-edit-row{display:grid;grid-template-columns:minmax(210px,1fr) minmax(0,1fr);gap:24px;align-items:start;width:100%}
.profile-page #editar-presentacion .profile-edit-row>label{margin:0;padding-top:10px;font-weight:700}
.profile-page #editar-presentacion .profile-edit-row>input,.profile-page #editar-presentacion .profile-edit-row>select,.profile-page #editar-presentacion .profile-edit-control{width:100%;min-width:0;box-sizing:border-box}
.profile-page #editar-presentacion .profile-edit-control{display:flex;flex-direction:column;gap:10px}
.profile-page #editar-presentacion .profile-edit-control>input[type=file]{width:100%;box-sizing:border-box;border:1px solid #cbd5df;border-radius:10px;padding:10px}
.profile-page #editar-presentacion .profile-edit-check{display:flex;align-items:center;gap:8px;font-weight:500;margin:0}
.profile-page #editar-presentacion .profile-edit-check input{margin:0;width:auto}
.profile-public-link{display:inline-flex;align-items:center;gap:6px;margin:7px 0;color:#0c426c!important;text-decoration:none!important;font-weight:700;font-size:.92rem}
.profile-public-link:hover,.profile-public-link:focus-visible{text-decoration:underline!important;color:#c9111b!important}
@media(max-width:720px){.profile-page #editar-presentacion form>.profile-edit-row{grid-template-columns:1fr;gap:6px}}

/* OrbitaSocial: Comunidad 2.0 */
.orbita-filters,.orbita-compose{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:15px;margin:12px 0;background:#fff;border:1px solid #d5e0e9;border-radius:14px}.orbita-filters input[type=search]{flex:1;min-width:190px}.orbita-compose{flex-direction:column;align-items:stretch}.orbita-compose label{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.orbita-compose input:not([type=checkbox]),.orbita-compose select,.orbita-compose textarea{max-width:100%;padding:9px;border:1px solid #ccd8e3;border-radius:8px}.orbita-post-meta{color:#b90e1a;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}.orbita-event{padding:12px;border-radius:10px;background:#f1f5f9;margin:10px 0;display:flex;flex-wrap:wrap;gap:5px}.orbita-poll{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid #dbe3ea;border-radius:12px;margin:12px 0}.orbita-choice{background:#f2f6fa!important;color:#123d60!important;text-align:left;border:1px solid #cbd5e1!important;border-radius:8px;padding:10px}.orbita-choice.selected{background:#d8eaf6!important;border-color:#166296!important}.orbita-choice:disabled{opacity:1;cursor:default}#orbitaComposeFields[hidden],#orbitaPollFields[hidden],#orbitaEventFields[hidden]{display:none!important}

/* AstroAgenda: reply actions */
.community-comment-like,.community-comment .community-text-button,.community-reply-toggle{border:1px solid #dbe5ee!important;border-radius:9px!important;background:#f6f9fc!important;color:#163f63!important;font-size:.9rem!important;font-weight:650!important;padding:8px 12px!important;margin:5px 6px 5px 0!important;cursor:pointer}.community-comment-like.selected{background:#e5f0ff!important}.community-reply[hidden]{display:none!important}.community-reply-toggle{display:inline-flex!important}.community-comment .community-content-actions{display:flex;gap:8px;flex-wrap:wrap}

/* NebulaPulida: herramientas coherentes en Comunidad */
.orbita-filters{display:grid;grid-template-columns:minmax(0,1fr) 155px auto;gap:12px;align-items:center}
.orbita-filters input[type=search]{width:100%;min-width:0;min-height:43px;font-size:1rem;padding:11px 15px;border:1px solid #cbd8e4;border-radius:12px}
.orbita-filters select{width:100%;min-height:43px;padding:8px;border:1px solid #cbd8e4;border-radius:10px;background:#fff}
.orbita-saved-button{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-height:43px;padding:9px 16px;border:1px solid #cbd8e4;border-radius:11px;background:#f5f8fc;color:#123e62;text-decoration:none;font-weight:700;font-size:.92rem}
.orbita-saved-button:hover,.orbita-saved-button.active{background:#e7f1fa;border-color:#8bb5d3}
.community-content-actions,.community-quick-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px;margin:12px 0}
.community-text-button,.community-comment-like,.community-reply-toggle,.community-show-more{display:inline-flex!important;align-items:center;justify-content:center;gap:5px;border:1px solid #d6e2ed!important;border-radius:10px!important;background:#f5f8fc!important;color:#123e62!important;padding:8px 13px!important;font:inherit!important;font-size:.89rem!important;font-weight:650!important;line-height:1.25!important;text-decoration:none!important;cursor:pointer;margin:0!important;max-width:100%}
.community-text-button:hover,.community-comment-like:hover,.community-reply-toggle:hover{background:#e8f1fa!important;border-color:#a9c4da!important;text-decoration:none!important}
.community-content-actions .community-text-button{background:#fff!important}
.community-content-actions .community-text-button:nth-child(2){color:#a71c22!important}
.community-comment .community-content-actions{margin:9px 0;gap:8px}
.community-comment .community-comment-like{margin-right:8px!important}
.community-quick-actions{padding:0 0 12px;border-bottom:1px solid #edf1f5}
.community-reactions{padding-top:8px}
.community-reply[hidden]{display:none!important}
.community-reply:not([hidden]){display:flex;flex-wrap:wrap;align-items:flex-end;background:#f6f9fc;border:1px solid #dbe5ee;border-radius:12px;padding:14px}
.community-reply:not([hidden]) textarea{flex:1 1 300px;min-width:0}
.community-reply-toggle{margin:10px 0!important}
@media(max-width:680px){.orbita-filters{grid-template-columns:1fr 1fr}.orbita-filters input[type=search]{grid-column:1/-1}.orbita-saved-button{white-space:normal;text-align:center}.community-reply:not([hidden]){display:block}}

/* Enlaces del carrusel con aspecto de botón */
.event-info a.primary { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; width: fit-content; }
.event-info a.primary:hover { filter: brightness(.93); color: white; }
.event-info a.primary:focus-visible { outline: 3px solid #103b63; outline-offset: 3px; }

/* Comunidad Clara: tarjetas alternadas, menú contextual y vista previa de comentarios */
#communityFeed>.community-post:nth-of-type(odd){background:#fff!important}
#communityFeed>.community-post:nth-of-type(even){background:#f1f6fa!important}
#communityFeed>.community-post{position:relative;border:1px solid #d9e4ee!important;border-radius:20px!important;box-shadow:0 5px 20px rgba(20,55,85,.045);padding:26px 30px!important;margin:15px 0!important}
.community-post>.social-menu{position:absolute;right:24px;top:20px;z-index:4}
.community-comment{position:relative;padding:14px 48px 14px 0!important}
.community-comment>.social-menu{position:absolute;right:0;top:8px;z-index:3}
.social-menu-trigger{border:0;background:transparent;border-radius:99px;color:#536a7f;font-size:27px;font-weight:800;line-height:1;letter-spacing:2px;padding:5px 10px;cursor:pointer}
.social-menu-trigger:hover,.social-menu-trigger[aria-expanded=true]{background:#e5edf5}
.social-menu-panel{position:absolute;top:38px;right:0;min-width:195px;max-width:min(310px,80vw);background:#fff;border:1px solid #dbe4ed;border-radius:13px;box-shadow:0 12px 35px rgba(14,43,70,.18);padding:6px;z-index:12}
.social-menu-panel[hidden]{display:none!important}
.social-menu-panel .community-quick-actions,.social-menu-panel .community-content-actions{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:2px!important;padding:0!important;margin:0!important;border:0!important}
.social-menu-panel button.community-text-button{display:block!important;width:100%;text-align:left!important;border:0!important;background:transparent!important;border-radius:8px!important;padding:11px 13px!important;color:#173b5b!important;font-weight:550!important}
.social-menu-panel button.community-text-button:hover{background:#edf4fa!important}
.community-post>.community-reactions{display:flex;gap:8px;padding:14px 0 12px!important;margin-top:10px;border-top:1px solid #e4ebf1;border-bottom:1px solid #e4ebf1}
.community-reactions button{border:0!important;background:transparent!important;font-size:.92rem!important;padding:8px 12px!important}
.community-reactions button:hover{background:#e6eef6!important}
.community-comments h3{font-size:.98rem!important;color:#65798c;margin:12px 0 6px!important}
.community-comment-bottom{display:flex;gap:10px;align-items:center;margin-top:6px}
.community-comment-bottom button{background:transparent!important;border:0!important;padding:6px 8px!important;font-size:.86rem!important}
.community-show-more{margin:12px 0!important;border:0!important;background:transparent!important;color:#194e79!important;padding:8px!important}
@media(max-width:600px){#communityFeed>.community-post{padding:20px 15px!important}.community-post>.social-menu{right:10px;top:12px}}

.registration-verified{color:#17683b;font-weight:700}.registration-unverified{color:#9a5b0a;font-weight:700}.request-card button:disabled{opacity:.48;cursor:not-allowed}

/* Evitar que el menú de tres puntos tape fecha, lugar o encuesta. */
.community-post>.orbita-post-meta{padding-right:72px;min-height:34px;box-sizing:border-box}
.community-post>.orbita-event{margin-right:70px;min-height:45px;box-sizing:border-box;overflow-wrap:anywhere}
.community-post>.social-menu{top:18px;right:20px}
.community-post>.social-menu .social-menu-trigger{min-width:48px;min-height:42px;background:#e8f0f7;border-radius:24px}
@media(max-width:600px){.community-post>.orbita-post-meta{padding-right:58px}.community-post>.orbita-event{margin-right:0;padding-right:12px}.community-post>.social-menu{right:12px;top:12px}}