/**
 * Estilos específicos para EduPreC2.php
 * Bloque 1 — Sistemas numéricos y "lenguaje" en la ruta de Precálculo.
 *
 * Reutiliza la base visual definida en EduPreC1.css (layout epc-*),
 * añadiendo solo ajustes menores si son necesarios.
 */

@import url("EduPreC1.css");

/* --------------------------------------------------
 * Tabs principales del bloque
 * -------------------------------------------------- */

.epc-section--tabs {
   padding-top: var(--epc-spacing-md);
   padding-bottom: var(--epc-spacing-sm);
}

.epc-tabs {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.35rem 0.25rem 0.15rem;
   border-radius: var(--epc-radius-lg);
   background-color: rgba(15, 23, 42, 0.95);
   box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9), 0 14px 30px rgba(15, 23, 42, 0.9);
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
}

.epc-tabs::-webkit-scrollbar {
   height: 6px;
}

.epc-tabs::-webkit-scrollbar-track {
   background: transparent;
}

.epc-tabs::-webkit-scrollbar-thumb {
   background: rgba(148, 163, 184, 0.4);
   border-radius: 999px;
}

.epc-tab {
   position: relative;
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.4rem 0.95rem;
   border-radius: var(--epc-radius-pill);
   border: 1px solid transparent;
   background-color: transparent;
   color: var(--epc-text-muted);
   font-size: 0.86rem;
   font-weight: 500;
   letter-spacing: 0.02em;
   text-transform: none;
   cursor: pointer;
   white-space: nowrap;
   transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.epc-tab:hover {
   background-color: rgba(15, 23, 42, 0.9);
   color: var(--epc-text-main);
}

.epc-tab.is-active {
   background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.3), rgba(15, 23, 42, 0.95));
   border-color: rgba(59, 130, 246, 0.9);
   color: #e5f0ff;
   box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.8), 0 10px 25px rgba(30, 64, 175, 0.65);
}

.epc-tab:focus-visible {
   outline: 2px solid #1d4ed8;
   outline-offset: 2px;
}

.epc-tab::after {
   content: "";
   position: absolute;
   left: 10%;
   right: 10%;
   bottom: -0.18rem;
   height: 2px;
   border-radius: 999px;
   background: transparent;
   transition: background-color 0.18s ease, opacity 0.18s ease;
   opacity: 0;
}

.epc-tab.is-active::after {
   background: linear-gradient(to right, rgba(59, 130, 246, 0.9), rgba(56, 189, 248, 0.9));
   opacity: 1;
}

@media (max-width: 768px) {
   .epc-tabs {
      padding-inline: 0.15rem;
      gap: 0.4rem;
   }

   .epc-tab {
      padding: 0.38rem 0.85rem;
      font-size: 0.84rem;
   }
}

@media (max-width: 480px) {
   .epc-tabs {
      border-radius: var(--epc-radius-md);
   }

   .epc-tab {
      padding-inline: 0.75rem;
   }
}

/* Asegura que cualquier elemento con [hidden] no ocupe espacio */
[hidden] {
   display: none !important;
}

/* Estilos específicos Bloque 1 — sección "Conjuntos numéricos" */

/* Contenedor principal del módulo */
.epc-number-module {
   max-width: 960px;
   margin: 0 auto;
   padding: calc(var(--epc-spacing-md) * 1.1) var(--epc-spacing-md);
}

.epc-number-layout {
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
}

.epc-number-row {
   display: block;
}

.epc-number-row--full {
   width: 100%;
}

.epc-number-row--two {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1.1rem;
}

.epc-number-row--bottom {
   margin-top: 0.5rem;
}

/* Ajustes tipográficos locales para legibilidad */
.epc-number-module .epc-section-text {
   font-size: 0.98rem;
}

.epc-number-module .epc-card-title {
   font-size: 1rem;
}

.epc-number-module .epc-card-text,
.epc-number-module .epc-card-example {
   font-size: 0.94rem;
}

/* Bloque de idea clave */
.epc-key-idea {
   margin: 0;
   padding: 0.9rem 1.1rem;
   border-radius: var(--epc-radius-md);
   border: 1px solid rgba(96, 165, 250, 0.55);
   background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.85));
   box-shadow: var(--epc-shadow-subtle);
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   gap: 0.6rem 1rem;
}

.epc-key-idea-label {
   padding: 0.15rem 0.7rem;
   border-radius: var(--epc-radius-pill);
   background-color: rgba(59, 130, 246, 0.18);
   color: var(--epc-primary);
   font-size: 0.8rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.06em;
}

.epc-key-idea-text {
   margin: 0;
   color: var(--epc-text-main);
   font-size: 0.95rem;
}

/* Mini cards para los principales conjuntos */

.epc-number-sets {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0.85rem;
   margin-top: 0.8rem;
}

.epc-number-set-card {
   background-color: #050505;
   border-radius: var(--epc-radius-md);
   padding: 0.8rem 0.9rem;
   border: 1px solid rgba(148, 163, 184, 0.35);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: 130px;
}

.epc-number-set-header {
   display: flex;
   align-items: center;
   gap: 0.45rem;
   margin-bottom: 0.25rem;
}

.epc-number-set-symbol {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   border-radius: 999px;
   background-color: rgba(59, 130, 246, 0.12);
   color: var(--epc-primary);
   font-weight: 700;
   font-size: 0.95rem;
}

.epc-number-set-name {
   font-size: 0.95rem;
   font-weight: 600;
   color: var(--epc-text-main);
}

.epc-number-set-definition,
.epc-number-set-examples {
   margin: 0.12rem 0;
   font-size: 0.9rem;
   color: var(--epc-text-muted);
}

.epc-number-set-examples strong {
   color: var(--epc-text-main);
   font-weight: 600;
}

@media (max-width: 900px) {
   .epc-number-sets {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 640px) {
   .epc-number-sets {
      grid-template-columns: 1fr;
   }
}

/* Cadena visual N → Z → Q → R */

.epc-number-chain-wrapper {
   width: 100%;
   max-width: 100%;
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
}

.epc-number-chain {
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.4rem 0.6rem;
   margin: 0.6rem 0 0.6rem;
   padding: 0.5rem 0.7rem;
   border-radius: var(--epc-radius-pill);
   background-color: #020617;
   border: 1px solid rgba(148, 163, 184, 0.5);
}

.epc-number-chain-item {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 0.1rem 0.55rem;
}

.epc-number-chain-symbol {
   font-weight: 700;
   font-size: 0.95rem;
   color: var(--epc-primary);
}

.epc-number-chain-label {
   font-size: 0.82rem;
   color: var(--epc-text-muted);
}

.epc-number-chain-arrow {
   font-size: 0.95rem;
   color: var(--epc-text-muted);
}

.epc-number-chain-note {
   margin-top: 0.35rem;
   font-size: 0.9rem;
   color: var(--epc-text-muted);
}

@media (max-width: 480px) {
   .epc-number-chain-wrapper {
      margin: 0.6rem 0 0.6rem;
   }

   .epc-number-chain {
      margin: 0;
      min-width: max-content;
   }
}

/* Tarjetas informativas (relación, ejemplo, error, resumen) */

.epc-info-card {
   background-color: #050505;
   border-radius: var(--epc-radius-md);
   padding: 0.85rem 1rem;
   border: 1px solid rgba(148, 163, 184, 0.4);
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
}

.epc-info-card--warning {
   border-color: rgba(250, 204, 21, 0.7);
   background: radial-gradient(circle at top left, rgba(250, 204, 21, 0.09), transparent 60%), #020617;
}

.epc-info-card--summary {
   border-style: dashed;
   border-color: rgba(96, 165, 250, 0.8);
   background-color: rgba(15, 23, 42, 0.9);
}

/* Tabla de clasificación de números */

.epc-table-wrapper {
   margin: 0.8rem 0 0.4rem;
   overflow-x: auto;
}

.epc-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.9rem;
}

.epc-table--classification thead {
   background-color: #020617;
}

.epc-table--classification th,
.epc-table--classification td {
   padding: 0.5rem 0.6rem;
   border-bottom: 1px solid rgba(148, 163, 184, 0.35);
   text-align: center;
   white-space: nowrap;
}

.epc-table--classification th:first-child,
.epc-table--classification td:first-child {
   text-align: left;
   white-space: normal;
}

.epc-table--classification th {
   font-weight: 600;
   color: var(--epc-text-main);
}

.epc-table--classification tr:nth-child(even) td {
   background-color: rgba(15, 23, 42, 0.7);
}

.epc-table-yes {
   color: #4ade80;
   font-weight: 600;
}

.epc-table-no {
   color: #f97373;
   font-weight: 500;
}

@media (max-width: 768px) {
   .epc-number-module {
      padding: var(--epc-spacing-md) var(--epc-spacing-sm);
   }

   .epc-number-row--two {
      grid-template-columns: 1fr;
   }
}

/* --------------------------------------------------
 * Bloque Intervalos y recta real
 * -------------------------------------------------- */

.epc-interval-module {
   max-width: 960px;
   margin: 0 auto;
   padding: calc(var(--epc-spacing-md) * 1.1) var(--epc-spacing-md);
}

.epc-interval-layout {
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
}

.epc-interval-row {
   display: block;
}

.epc-interval-row--full {
   width: 100%;
}

.epc-interval-row--two {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1.1rem;
}

.epc-interval-row--bottom {
   margin-top: 0.5rem;
}

.epc-interval-module .epc-section-text {
   font-size: 0.98rem;
}

.epc-interval-module .epc-card-title {
   font-size: 1rem;
}

.epc-interval-module .epc-card-text,
.epc-interval-module .epc-card-example {
   font-size: 0.94rem;
}

/* Mini cards para tipos de intervalos */

.epc-interval-types {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0.85rem;
   margin-top: 0.8rem;
}

.epc-interval-type-card {
   background-color: #050505;
   border-radius: var(--epc-radius-md);
   padding: 0.8rem 0.9rem;
   border: 1px solid rgba(148, 163, 184, 0.35);
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
   min-height: 130px;
}

.epc-interval-type-name {
   margin: 0;
   font-size: 0.95rem;
   font-weight: 600;
   color: var(--epc-text-main);
}

.epc-interval-type-notation {
   margin: 0;
   font-size: 0.92rem;
   font-weight: 600;
   color: var(--epc-primary);
}

.epc-interval-type-description {
   margin: 0.05rem 0 0;
   font-size: 0.9rem;
   color: var(--epc-text-muted);
}

/* Paréntesis vs corchetes y recta real */

.epc-interval-brackets-examples {
   margin-top: 0.4rem;
   padding-top: 0.45rem;
   border-top: 1px dashed rgba(148, 163, 184, 0.45);
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
}

.epc-interval-line-legend {
   margin-top: 0.35rem;
   padding: 0.6rem 0.75rem;
   border-radius: var(--epc-radius-md);
   border: 1px dashed rgba(96, 165, 250, 0.75);
   background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.2), transparent 60%), #020617;
}

/* Tabla de ejemplos de intervalos */

.epc-table--intervals thead {
   background-color: #020617;
}

.epc-table--intervals th,
.epc-table--intervals td {
   padding: 0.5rem 0.6rem;
   border-bottom: 1px solid rgba(148, 163, 184, 0.35);
   font-size: 0.9rem;
}

.epc-table--intervals th {
   font-weight: 600;
   color: var(--epc-text-main);
   text-align: left;
}

.epc-table--intervals td {
   color: var(--epc-text-muted);
}

.epc-table--intervals td:first-child,
.epc-table--intervals td:last-child {
   white-space: nowrap;
}

.epc-table--intervals tr:nth-child(even) td {
   background-color: rgba(15, 23, 42, 0.75);
}

@media (max-width: 900px) {
   .epc-interval-types {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 768px) {
   .epc-interval-module {
      padding: var(--epc-spacing-md) var(--epc-spacing-sm);
   }

   .epc-interval-row--two {
      grid-template-columns: 1fr;
   }
}

/* --------------------------------------------------
 * Bloque Jerarquía de operaciones
 * -------------------------------------------------- */

.epc-hierarchy-module {
   max-width: 960px;
   margin: 0 auto;
   padding: calc(var(--epc-spacing-md) * 1.1) var(--epc-spacing-md);
}

.epc-hierarchy-layout {
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
}

.epc-hierarchy-row {
   display: block;
}

.epc-hierarchy-row--full {
   width: 100%;
}

.epc-hierarchy-row--two {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1.1rem;
}

.epc-hierarchy-row--bottom {
   margin-top: 0.5rem;
}

/* Tipografía local para jerarquía */

.epc-hierarchy-module .epc-section-text {
   font-size: 0.98rem;
}

.epc-hierarchy-module .epc-card-title {
   font-size: 1rem;
}

.epc-hierarchy-module .epc-card-text,
.epc-hierarchy-module .epc-card-example {
   font-size: 0.94rem;
}

/* Pasos visuales del orden de operaciones */

.epc-hierarchy-steps {
   margin-top: 0.8rem;
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 0.85rem;
}

.epc-step-card {
   background-color: #050505;
   border-radius: var(--epc-radius-md);
   padding: 0.75rem 0.9rem;
   border: 1px solid rgba(148, 163, 184, 0.35);
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
   min-height: 130px;
}

.epc-step-header {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 0.45rem;
}

.epc-step-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.12rem 0.6rem;
   border-radius: var(--epc-radius-pill);
   background-color: rgba(59, 130, 246, 0.15);
   color: var(--epc-primary);
   font-size: 0.78rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.08em;
}

.epc-step-title {
   font-size: 0.93rem;
   font-weight: 600;
   color: var(--epc-text-main);
}

.epc-step-text {
   margin: 0;
   font-size: 0.88rem;
   color: var(--epc-text-muted);
}

.epc-hierarchy-note {
   margin-top: 0.75rem;
   font-size: 0.9rem;
   color: var(--epc-text-muted);
}

/* Ejemplo guiado como flujo de pasos */

.epc-example-flow {
   margin-top: 0.8rem;
   border-radius: var(--epc-radius-md);
   border: 1px solid rgba(148, 163, 184, 0.4);
   background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.16), transparent 55%), #020617;
   padding: 0.85rem 1rem;
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
}

.epc-example-flow-header {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   justify-content: space-between;
   gap: 0.5rem 0.8rem;
}

.epc-example-label {
   font-size: 0.85rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--epc-text-muted);
}

.epc-example-expression {
   font-size: 1rem;
   font-weight: 600;
   color: var(--epc-text-main);
}

.epc-example-flow-steps {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0.75rem;
}

.epc-example-step {
   background-color: rgba(15, 23, 42, 0.95);
   border-radius: var(--epc-radius-md);
   padding: 0.75rem 0.85rem;
   border: 1px solid rgba(148, 163, 184, 0.5);
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
}

.epc-example-step-header {
   display: flex;
   align-items: center;
   gap: 0.4rem;
   margin-bottom: 0.15rem;
}

.epc-example-step-title {
   font-size: 0.9rem;
   font-weight: 600;
   color: var(--epc-text-main);
}

.epc-example-step-text,
.epc-example-step-state {
   margin: 0;
   font-size: 0.85rem;
   color: var(--epc-text-muted);
}

.epc-example-step-state--result {
   color: var(--epc-primary);
   font-weight: 600;
}

@media (max-width: 900px) {
   .epc-hierarchy-steps {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .epc-example-flow-steps {
      grid-template-columns: 1fr 1fr;
   }
}

@media (max-width: 768px) {
   .epc-hierarchy-module {
      padding: var(--epc-spacing-md) var(--epc-spacing-sm);
   }

   .epc-hierarchy-row--two {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 640px) {
   .epc-hierarchy-steps {
      grid-template-columns: 1fr;
   }

   .epc-example-flow-steps {
      grid-template-columns: 1fr;
   }
}

/* --------------------------------------------------
 * Bloque Potencias y radicales
 * -------------------------------------------------- */

.epc-powers-module {
   max-width: 960px;
   margin: 0 auto;
   padding: calc(var(--epc-spacing-md) * 1.1) var(--epc-spacing-md);
}

.epc-powers-layout {
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
}

.epc-powers-row {
   display: block;
}

.epc-powers-row--full {
   width: 100%;
}

.epc-powers-row--two {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1.1rem;
}

.epc-powers-row--bottom {
   margin-top: 0.5rem;
}

/* Tipografía local para potencias y radicales */

.epc-powers-module .epc-section-text {
   font-size: 0.98rem;
}

.epc-powers-module .epc-card-title {
   font-size: 1rem;
}

.epc-powers-module .epc-card-text,
.epc-powers-module .epc-card-example {
   font-size: 0.94rem;
}

/* Bloques principales A/B */

.epc-powers-block {
   background-color: #050505;
   border-radius: var(--epc-radius-md);
   padding: 0.9rem 1rem;
   border: 1px solid rgba(148, 163, 184, 0.4);
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
}

.epc-powers-block-header {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem 0.8rem;
}

.epc-powers-block-tag {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.12rem 0.6rem;
   border-radius: var(--epc-radius-pill);
   background-color: rgba(96, 165, 250, 0.14);
   color: var(--epc-primary);
   font-size: 0.78rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.08em;
}

/* Mini tarjetas para las leyes de exponentes */

.epc-laws-grid {
   margin-top: 0.6rem;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0.75rem;
}

.epc-law-card {
   background-color: rgba(15, 23, 42, 0.96);
   border-radius: var(--epc-radius-md);
   padding: 0.7rem 0.8rem;
   border: 1px solid rgba(148, 163, 184, 0.55);
   display: flex;
   flex-direction: column;
   gap: 0.3rem;
}

.epc-law-title {
   margin: 0;
   font-size: 0.9rem;
   font-weight: 600;
   color: var(--epc-text-main);
}

.epc-law-rule {
   margin: 0;
   font-size: 0.95rem;
   font-weight: 600;
   color: var(--epc-primary);
}

.epc-law-note {
   margin: 0;
   font-size: 0.86rem;
   color: var(--epc-text-muted);
}

.epc-law-example {
   margin: 0;
   font-size: 0.86rem;
   color: var(--epc-text-main);
}

/* Radicales: definición y ejemplos */

.epc-radical-definition {
   margin-top: 0.4rem;
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
}

/* Ejemplos guiados (exponentes y radicales) */

.epc-example-card {
   background-color: #050505;
   border-radius: var(--epc-radius-md);
   padding: 0.9rem 1rem;
   border: 1px solid rgba(148, 163, 184, 0.4);
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

.epc-example-body {
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
}

.epc-example-item {
   margin: 0;
   font-size: 0.9rem;
   color: var(--epc-text-muted);
}

.epc-example-item--result {
   color: var(--epc-primary);
   font-weight: 600;
}

.epc-example-label {
   display: inline-block;
   min-width: 92px;
   font-size: 0.82rem;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--epc-text-muted);
   margin-right: 0.35rem;
}

@media (max-width: 900px) {
   .epc-laws-grid {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 768px) {
   .epc-powers-module {
      padding: var(--epc-spacing-md) var(--epc-spacing-sm);
   }

   .epc-powers-row--two {
      grid-template-columns: 1fr;
   }
}

/* --------------------------------------------------
 * Bloque Racionalización básica
 * -------------------------------------------------- */

.epc-rational-module {
   max-width: 960px;
   margin: 0 auto;
   padding: calc(var(--epc-spacing-md) * 1.1) var(--epc-spacing-md);
}

.epc-rational-layout {
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
}

.epc-rational-row {
   display: block;
}

.epc-rational-row--full {
   width: 100%;
}

.epc-rational-row--two {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1.1rem;
}

.epc-rational-row--bottom {
   margin-top: 0.5rem;
}

.epc-rational-module .epc-section-text {
   font-size: 0.98rem;
}

.epc-rational-module .epc-card-title {
   font-size: 1rem;
}

.epc-rational-module .epc-card-text,
.epc-rational-module .epc-card-example {
   font-size: 0.94rem;
}

.epc-rational-flow {
   margin-top: 0.7rem;
}

@media (max-width: 768px) {
   .epc-rational-module {
      padding: var(--epc-spacing-md) var(--epc-spacing-sm);
   }

   .epc-rational-row--two {
      grid-template-columns: 1fr;
   }
}

/* --------------------------------------------------
 * Bloque Valor absoluto
 * -------------------------------------------------- */

.epc-absolute-module {
   max-width: 960px;
   margin: 0 auto;
   padding: calc(var(--epc-spacing-md) * 1.1) var(--epc-spacing-md);
}

.epc-absolute-layout {
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
}

.epc-absolute-row {
   display: block;
}

.epc-absolute-row--full {
   width: 100%;
}

.epc-absolute-row--two {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1.1rem;
}

.epc-absolute-row--bottom {
   margin-top: 0.5rem;
}

.epc-absolute-module .epc-section-text {
   font-size: 0.98rem;
}

.epc-absolute-module .epc-card-title {
   font-size: 1rem;
}

.epc-absolute-module .epc-card-text,
.epc-absolute-module .epc-card-example {
   font-size: 0.94rem;
}

.epc-absolute-col {
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
}

.epc-absolute-geo {
   margin-top: 0.2rem;
   padding: 0.7rem 0.85rem;
   border-radius: var(--epc-radius-md);
   border: 1px dashed rgba(96, 165, 250, 0.75);
   background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.22), transparent 60%), #020617;
}

.epc-absolute-geo-label {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.1rem 0.6rem;
   border-radius: var(--epc-radius-pill);
   background-color: rgba(15, 23, 42, 0.9);
   color: var(--epc-primary);
   font-size: 0.78rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   margin-bottom: 0.35rem;
}

.epc-absolute-geo-text {
   margin: 0.05rem 0;
   font-size: 0.88rem;
   color: var(--epc-text-main);
}

.epc-absolute-flow {
   margin-top: 0.6rem;
}

@media (max-width: 768px) {
   .epc-absolute-module {
      padding: var(--epc-spacing-md) var(--epc-spacing-sm);
   }

   .epc-absolute-row--two {
      grid-template-columns: 1fr;
   }
}

/* --------------------------------------------------
 * Bloque Desigualdades con valor absoluto
 * -------------------------------------------------- */

.epc-absineq-module {
   max-width: 960px;
   margin: 0 auto;
   padding: calc(var(--epc-spacing-md) * 1.1) var(--epc-spacing-md);
}

.epc-absineq-layout {
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
}

.epc-absineq-row {
   display: block;
}

.epc-absineq-row--full {
   width: 100%;
}

.epc-absineq-row--two {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1.1rem;
}

.epc-absineq-row--bottom {
   margin-top: 0.5rem;
}

.epc-absineq-module .epc-section-text {
   font-size: 0.98rem;
}

.epc-absineq-module .epc-card-title {
   font-size: 1rem;
}

.epc-absineq-module .epc-card-text,
.epc-absineq-module .epc-card-example {
   font-size: 0.94rem;
}

.epc-absineq-case {
   gap: 0.55rem;
}

.epc-absineq-example {
   margin-top: 0.35rem;
   padding-top: 0.45rem;
   border-top: 1px dashed rgba(148, 163, 184, 0.45);
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
}

.epc-absineq-label {
   display: inline-block;
   min-width: 88px;
   font-size: 0.8rem;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--epc-text-muted);
   margin-right: 0.35rem;
}

.epc-absineq-example-result {
   color: var(--epc-primary);
   font-weight: 600;
}

@media (max-width: 768px) {
   .epc-absineq-module {
      padding: var(--epc-spacing-md) var(--epc-spacing-sm);
   }

   .epc-absineq-row--two {
      grid-template-columns: 1fr;
   }
}

/* --------------------------------------------------
 * Bloque Ejemplos rápidos
 * -------------------------------------------------- */

.epc-quick-grid {
   align-items: stretch;
}

.epc-quick-card {
   display: flex;
   flex-direction: column;
   gap: 0.45rem;
   min-height: 190px;
}

.epc-quick-label {
   display: inline-block;
   min-width: 82px;
   font-size: 0.8rem;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--epc-text-muted);
   margin-right: 0.35rem;
}

.epc-quick-result {
   margin-top: 0.25rem;
   padding-top: 0.35rem;
   border-top: 1px dashed rgba(148, 163, 184, 0.45);
   color: var(--epc-primary);
   font-weight: 600;
}

@media (max-width: 768px) {
   .epc-quick-card {
      min-height: 0;
   }
}

/* --------------------------------------------------
 * Mini quiz visual Bloque 1
 * -------------------------------------------------- */

.epc-quiz-grid {
   align-items: stretch;
   gap: 1rem;
}

.epc-quiz-card {
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
   height: 100%;
   min-height: 260px;
   border-radius: var(--epc-radius-lg);
   border: 1px solid rgba(148, 163, 184, 0.5);
   background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 55%), #020617;
   box-shadow: 0 14px 30px rgba(15, 23, 42, 0.85);
}

.epc-quiz-body {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   gap: 0.55rem;
}

.epc-quiz-footer {
   margin-top: 0.25rem;
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
}

.epc-quiz-header {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 0.4rem 0.75rem;
}

.epc-quiz-tag {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.1rem 0.6rem;
   border-radius: var(--epc-radius-pill);
   background-color: rgba(37, 99, 235, 0.16);
   color: var(--epc-primary);
   font-size: 0.78rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.08em;
}

.epc-quiz-question-number {
   font-size: 0.86rem;
   color: var(--epc-text-muted);
}

.epc-quiz-question-text {
   margin: 0;
   font-size: 0.95rem;
   color: var(--epc-text-main);
}

.epc-quiz-options {
   margin: 0;
   padding: 0;
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
}

.epc-quiz-option {
   width: 100%;
   display: flex;
   align-items: flex-start;
   gap: 0.35rem;
   padding: 0.4rem 0.55rem;
   border-radius: var(--epc-radius-md);
   border: 1px solid rgba(148, 163, 184, 0.5);
   background-color: rgba(15, 23, 42, 0.95);
   color: var(--epc-text-main);
   font-size: 0.9rem;
   text-align: left;
   cursor: pointer;
   transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.epc-quiz-option:hover {
   border-color: rgba(96, 165, 250, 0.9);
   box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.7);
   background-color: rgba(15, 23, 42, 0.98);
}

.epc-quiz-option:focus-visible {
   outline: 2px solid #1d4ed8;
   outline-offset: 2px;
}

.epc-quiz-option-label {
   min-width: 1.8rem;
   font-weight: 600;
   color: var(--epc-text-muted);
}

.epc-quiz-option-text {
   flex: 1 1 auto;
}

.epc-quiz-option.is-selected {
   border-color: rgba(96, 165, 250, 0.95);
   background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.28), rgba(15, 23, 42, 0.98));
   box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.85);
}

.epc-quiz-card--correct {
   border-color: rgba(34, 197, 94, 0.9);
   box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.9), 0 16px 32px rgba(22, 163, 74, 0.5);
}

.epc-quiz-card--incorrect {
   border-color: rgba(248, 113, 113, 0.9);
   box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.9), 0 16px 32px rgba(248, 113, 113, 0.3);
}

.epc-quiz-option--correct {
   border-color: rgba(34, 197, 94, 0.95);
   background: radial-gradient(circle at top left, rgba(34, 197, 94, 0.28), rgba(15, 23, 42, 0.98));
}

.epc-quiz-option--incorrect {
   border-color: rgba(248, 113, 113, 0.95);
   background: radial-gradient(circle at top left, rgba(248, 113, 113, 0.24), rgba(15, 23, 42, 0.98));
}

.epc-quiz-option[disabled] {
   cursor: default;
   opacity: 0.8;
   transform: none;
}

.epc-quiz-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin-top: 0.25rem;
}

.epc-btn--quiz-primary {
   padding-inline: 0.9rem;
   font-size: 0.86rem;
}

.epc-btn--quiz-retry {
   padding-inline: 0.85rem;
   font-size: 0.84rem;
}

.epc-quiz-feedback {
   margin: 0.05rem 0 0;
   font-size: 0.88rem;
   color: var(--epc-text-muted);
   min-height: 1.6em;
}

.epc-quiz-feedback--correct {
   color: #4ade80;
   font-weight: 600;
}

.epc-quiz-feedback--incorrect {
   color: #fca5a5;
   font-weight: 500;
}

@media (max-width: 900px) {
   .epc-quiz-grid {
      gap: 0.85rem;
   }
}

@media (max-width: 768px) {
   .epc-quiz-card {
      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.9);
   }

   .epc-quiz-actions {
      justify-content: flex-start;
   }
}

@media (max-width: 640px) {
   .epc-quiz-actions {
      flex-direction: row;
   }
}

/* --------------------------------------------------
 * Ajustes responsive globales extra para Bloque 1
 * (afinado en móviles angostos ~400px, 390px, 360px)
 * -------------------------------------------------- */

@media (max-width: 640px) {
   /* Evita que el módulo se haga más ancho que el viewport */
   .epc-page {
      overflow-x: hidden;
   }

   .epc-section,
   .epc-tab-panel {
      padding-left: 0;
      padding-right: 0;
   }

   .epc-section .epc-container {
      max-width: 100%;
      padding-left: var(--epc-spacing-sm);
      padding-right: var(--epc-spacing-sm);
   }

   /* Todos los módulos de contenido del bloque ocupan el ancho disponible */
   .epc-number-module,
   .epc-interval-module,
   .epc-hierarchy-module,
   .epc-powers-module,
   .epc-rational-module,
   .epc-absolute-module,
   .epc-absineq-module {
      max-width: 100%;
      padding-left: var(--epc-spacing-sm);
      padding-right: var(--epc-spacing-sm);
   }

   /* Refuerzo: todas las filas de dos columnas se apilan en una sola */
   .epc-number-row--two,
   .epc-interval-row--two,
   .epc-hierarchy-row--two,
   .epc-powers-row--two,
   .epc-rational-row--two,
   .epc-absolute-row--two,
   .epc-absineq-row--two {
      grid-template-columns: 1fr;
   }

   /* Tablas siempre dentro del viewport, con scroll interno controlado */
   .epc-table-wrapper {
      max-width: 100%;
      -webkit-overflow-scrolling: touch;
   }

   .epc-table {
      width: 100%;
   }

   /* Barra de tabs: asegura que nunca empuje el layout fuera del viewport */
   .epc-section--tabs .epc-container {
      padding-left: var(--epc-spacing-sm);
      padding-right: var(--epc-spacing-sm);
   }

   .epc-tabs {
      max-width: 100%;
   }
}

@media (max-width: 480px) {
   /* Ajuste fino de cards para evitar alturas y anchos rígidos en móvil estrecho */
   .epc-card,
   .epc-quiz-card {
      padding: var(--epc-spacing-md) var(--epc-spacing-sm);
      border-radius: var(--epc-radius-md);
   }

   .epc-quiz-card {
      min-height: 0;
   }

   .epc-quiz-option {
      padding: 0.4rem 0.5rem;
      font-size: 0.88rem;
   }

   .epc-quiz-question-text {
      font-size: 0.9rem;
   }

   .epc-quick-card {
      min-height: 0;
   }

   /* Cadenas visuales y bloques compactos: se relajan un poco en móvil */
   .epc-number-chain {
      width: 100%;
      justify-content: flex-start;
   }

   .epc-example-flow,
   .epc-absolute-geo,
   .epc-interval-line-legend {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
   }
}