/* =================================================================
   content/css/electricidad.css
   =================================================================
   Hoja de estilos PROPIA del contenido "Fundamentos de electricidad".
   Solo afecta a lo que está dentro de <article class="electricidad-curso">
   en content/html/fundamentos_electricidad.html.

   Diseño: "tarjetas" (cards) con sombra suave, secciones plegables
   por temática, bloques de fórmulas destacados, y diseño responsive
   para que se vea bien tanto en computadora como en celular.

   Reutiliza las variables CSS globales (--primary-color, etc.)
   definidas en /assets/css/style.css, que ya está cargado desde
   includes/header.php antes de que se cargue este archivo.
   ================================================================= */

/* -----------------------------------------------------------------
   Contenedor general del curso
   ----------------------------------------------------------------- */
.electricidad-curso {
    max-width: 900px;
    margin: 0 auto;
    font-family: 'Inter', sans-serif;
    color: var(--text-color, #1B2330);
}

/* -----------------------------------------------------------------
   Introducción (encabezado del curso)
   ----------------------------------------------------------------- */
.curso-intro h2 {
    font-family: var(--font-display, sans-serif);
    font-size: 1.9rem;
    margin-bottom: 14px;
    color: var(--text-color, #1B2330);
}

.curso-intro p {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--text-light, #5C6B7A);
    margin-bottom: 30px;
}

/* -----------------------------------------------------------------
   Tarjetas genéricas (caja blanca con sombra suave)
   -----------------------------------------------------------------
   Esta es la clase base "tarjeta": un bloque visual reutilizable
   que usamos para la figura del circuito, los datos clave, las
   fórmulas y el ejemplo resuelto. Mantener un único estilo base de
   "tarjeta" y luego variarlo con clases adicionales (como
   tarjeta-dato, tarjeta-formula) es una técnica común en CSS para
   no repetir las mismas reglas una y otra vez.
   ----------------------------------------------------------------- */
.tarjeta {
    background: #fff;
    border-radius: var(--border-radius, 10px);
    box-shadow: var(--shadow, 0 2px 14px rgba(11,19,32,0.08));
    padding: 20px 24px;
    margin-bottom: 20px;
}

/* -----------------------------------------------------------------
   Figura del circuito (imagen SVG de ejemplo)
   ----------------------------------------------------------------- */
.figura-circuito {
    text-align: center;
    margin: 30px 0 40px;
}

.figura-circuito svg {
    width: 100%;
    max-width: 480px;
    height: auto;
}

.figura-circuito figcaption {
    margin-top: 12px;
    font-size: 0.88rem;
    color: var(--text-light, #5C6B7A);
    font-style: italic;
}

/* -----------------------------------------------------------------
   Secciones temáticas (voltaje, corriente, resistencia, ley de ohm)
   -----------------------------------------------------------------
   Cada <section class="modulo"> representa un bloque de información
   independiente. El borde de color a la izquierda ayuda a separar
   visualmente una sección de la siguiente sin necesitar líneas
   divisorias completas.
   ----------------------------------------------------------------- */
.modulo {
    background: #fff;
    border-radius: var(--border-radius, 10px);
    box-shadow: var(--shadow, 0 2px 14px rgba(11,19,32,0.08));
    margin-bottom: 24px;
    overflow: hidden;
    border-left: 5px solid var(--primary-color, #39FF8E);
}

.modulo-header {
    padding: 16px 24px;
    background: var(--light-color, #F4F7F6);
}

.modulo-header h3 {
    margin: 0;
    font-family: var(--font-display, sans-serif);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-color, #1B2330);
}

.modulo-header h3 i {
    color: var(--secondary-color, #00C8FF);
}

.modulo-contenido {
    padding: 20px 24px;
}

.modulo-contenido p {
    line-height: 1.7;
    margin-bottom: 14px;
}

.modulo-contenido ul {
    margin: 0 0 16px 20px;
    line-height: 1.7;
}

.modulo-contenido ul li {
    margin-bottom: 6px;
}

/* -----------------------------------------------------------------
   Bloques de "dato clave" dentro de cada sección
   ----------------------------------------------------------------- */
.tarjeta-dato {
    background: rgba(57, 255, 142, 0.08);
    border: 1px solid rgba(57, 255, 142, 0.35);
    box-shadow: none;
}

/* -----------------------------------------------------------------
   Bloque de fórmula principal (Ley de Ohm)
   ----------------------------------------------------------------- */
.tarjeta-formula {
    text-align: center;
    background: var(--dark-color, #0B1320);
    color: #fff;
}

.formula-principal {
    font-family: var(--font-mono, monospace);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--primary-color, #39FF8E);
    margin-bottom: 6px;
}

.formula-leyenda {
    color: rgba(255,255,255,0.75);
    font-size: 0.95rem;
}

/* -----------------------------------------------------------------
   Fórmulas derivadas (despeje de I, R, V) en fila de 3 columnas
   ----------------------------------------------------------------- */
.formulas-derivadas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 20px 0;
}

.formulas-derivadas .tarjeta {
    text-align: center;
    margin-bottom: 0;
}

.formula-pequena {
    font-family: var(--font-mono, monospace);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--secondary-color, #00C8FF);
    margin-bottom: 6px;
}

/* -----------------------------------------------------------------
   Bloque de ejemplo resuelto
   ----------------------------------------------------------------- */
.tarjeta-ejemplo {
    background: rgba(0, 200, 255, 0.06);
    border: 1px solid rgba(0, 200, 255, 0.3);
    box-shadow: none;
}

.tarjeta-ejemplo p {
    margin: 10px 0;
}

/* -----------------------------------------------------------------
   Cierre / resumen final del curso
   ----------------------------------------------------------------- */
.curso-cierre {
    background: var(--light-color, #F4F7F6);
    border-radius: var(--border-radius, 10px);
    padding: 20px 24px;
    margin-top: 10px;
    font-size: 0.98rem;
}

/* -----------------------------------------------------------------
   RESPONSIVE
   -----------------------------------------------------------------
   En pantallas angostas (celulares), las 3 fórmulas derivadas se
   apilan en una sola columna en vez de ir en fila, para que no se
   vean demasiado apretadas.
   ----------------------------------------------------------------- */
@media (max-width: 640px) {
    .formulas-derivadas {
        grid-template-columns: 1fr;
    }

    .curso-intro h2 {
        font-size: 1.5rem;
    }

    .formula-principal {
        font-size: 1.9rem;
    }

    .modulo-header,
    .modulo-contenido {
        padding: 14px 18px;
    }
}