/* ERA/IRESC · TCAE — Estilos de lecciones y páginas de módulo (oct 2026)
   Complementa a tcae.css. Todas las reglas van acotadas a .lesson-shell,
   .module-dashboard o .pagehero para no alterar la portada del curso. */

:root{
  --tl-navy:#153449; --tl-navy2:#0d3249; --tl-green:#1b9d79; --tl-green-d:#14806a;
  --tl-orange:#ef7d00; --tl-text:#40596a; --tl-muted:#6a8090; --tl-line:#d7e2e9;
  --tl-soft:#f4f8fa; --tl-card:#ffffff; --tl-red:#c94e55;
}

/* ---------- Contenedor general de lección ---------- */
.lesson-shell{width:min(1080px,calc(100% - 32px));margin:28px auto 40px;color:var(--tl-text);line-height:1.6}
.lesson-shell *{box-sizing:border-box}
.lesson-shell img{max-width:100%;height:auto}
.lesson-shell h2{color:var(--tl-navy);font-size:24px;line-height:1.25;margin:0 0 14px}
.lesson-shell h3{color:var(--tl-navy);font-size:17px;margin:0 0 8px}
.lesson-shell p{margin:0 0 12px}
.lesson-shell ul,.lesson-shell ol{margin:0 0 12px;padding-left:22px}
.lesson-shell li{margin:4px 0}

/* Cabecera */
.lesson-header{background:linear-gradient(135deg,var(--tl-navy) 0%,#1d5677 100%);color:#fff;border-radius:24px;padding:30px 32px;margin-bottom:18px;box-shadow:0 16px 36px rgba(21,52,73,.18)}
.lesson-header .eyebrow{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.12em;color:#9fe3cf;margin-bottom:8px;text-transform:uppercase}
.lesson-header h1{margin:0 0 12px;font-size:clamp(28px,4vw,40px);line-height:1.12;color:#fff}
.lesson-header p{color:#dcebf2;font-size:17px;max-width:880px}
.lesson-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.lesson-meta span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:700;color:#fff}

/* Aviso */
.sensitive-banner{background:#fff7ec;border:1px solid #f5d2a6;border-left:6px solid var(--tl-orange);border-radius:16px;padding:16px 20px;margin-bottom:18px}
.sensitive-banner strong{display:block;color:#9a4f00;margin-bottom:4px}
.sensitive-banner p{margin:0;color:#6b5236}

/* Objetivos */
.objectives{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:18px}
.objective{background:var(--tl-card);border:1px solid var(--tl-line);border-radius:16px;padding:14px 16px;box-shadow:0 6px 16px rgba(18,52,73,.05)}
.objective b{display:block;font-size:11px;letter-spacing:.12em;color:var(--tl-green);margin-bottom:4px}

/* Tarjetas de contenido */
.content-card{background:var(--tl-card);border:1px solid var(--tl-line);border-radius:22px;padding:26px 28px;margin-bottom:18px;box-shadow:0 10px 26px rgba(18,52,73,.06)}
.media-intro{color:var(--tl-muted);font-size:14px;margin-bottom:14px}

.quote-box,.key-point{background:linear-gradient(135deg,#eef8f4,#f4fafc);border:1px solid #cfe9df;border-left:5px solid var(--tl-green);border-radius:14px;padding:14px 18px;margin:14px 0}
.quote-box strong,.key-point strong{display:block;color:var(--tl-green-d);margin-bottom:4px}

/* Rejillas */
.study-grid,.example-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:12px 0}
.three-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0}
.study-box,.example-box{background:var(--tl-soft);border:1px solid var(--tl-line);border-radius:16px;padding:16px 18px}
.study-box p,.example-box p{margin:0 0 8px}
.study-box ul,.example-box ul{margin:0}
.info-box{background:var(--tl-soft);border:1px solid var(--tl-line);border-radius:14px;padding:14px 16px;font-size:15px}
.info-box b{display:block;color:var(--tl-navy);margin-bottom:4px}

.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.stat-card{background:var(--tl-navy);color:#fff;border-radius:16px;padding:16px;text-align:center}
.stat-card strong{display:block;font-size:18px}
.stat-card span{font-size:13px;color:#cfe3ee}

/* Listas con check */
.lesson-shell ul.checklist{list-style:none;padding:0}
.lesson-shell ul.checklist li{position:relative;padding:8px 10px 8px 34px;border-bottom:1px dashed var(--tl-line);margin:0}
.lesson-shell ul.checklist li:last-child{border-bottom:0}
.lesson-shell ul.checklist li::before{content:"✓";position:absolute;left:8px;top:8px;width:18px;height:18px;border-radius:50%;background:var(--tl-green);color:#fff;font-size:11px;font-weight:900;display:grid;place-items:center}

/* Tablas */
.compare-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--tl-line);border-radius:14px;overflow:hidden;font-size:15px}
.compare-table th{background:var(--tl-navy);color:#fff;text-align:left;padding:11px 14px;font-size:14px}
.compare-table td{padding:11px 14px;border-top:1px solid var(--tl-line);vertical-align:top}
.compare-table tbody tr:nth-child(even) td{background:var(--tl-soft)}

/* Fotos */
.real-media-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.real-media{margin:0;background:var(--tl-soft);border:1px solid var(--tl-line);border-radius:16px;overflow:hidden}
.real-media img{display:block;width:100%;height:260px;object-fit:cover;background:#e6eef3}
.real-media figcaption{padding:12px 14px;font-size:14px;color:var(--tl-text)}
.real-media figcaption strong{color:var(--tl-navy)}
.media-license{display:block;margin-top:6px;font-size:12px;color:var(--tl-muted)}

/* Vídeos */
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.video-card{background:var(--tl-soft);border:1px solid var(--tl-line);border-radius:16px;overflow:hidden}
.video-card .ratio{position:relative;width:100%;aspect-ratio:16/9;background:#0d3249}
.video-card .ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-copy{padding:14px 16px}

/* Línea de pasos */
.timeline{display:grid;gap:10px;margin-top:12px}
.timeline-item{display:flex;gap:14px;align-items:flex-start;background:var(--tl-soft);border:1px solid var(--tl-line);border-radius:14px;padding:12px 14px}
.timeline-item>b{flex:0 0 34px;height:34px;border-radius:50%;background:var(--tl-green);color:#fff;display:grid;place-items:center;font-weight:900}
.timeline-item strong{display:block;color:var(--tl-navy)}
.timeline-item span{color:var(--tl-muted);font-size:14px}

/* Lo que no se debe hacer */
.scope{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.scope .no{background:#fdf0f1;border:1px solid #f1c9cc;border-left:5px solid var(--tl-red);border-radius:14px;padding:14px 16px}
.scope .no strong{color:#a33a40}

/* Actividades */
.activity{background:#f3f8fb;border:1px dashed #b9cfdc;border-radius:16px;padding:18px 20px}
.activity textarea{width:100%;min-height:110px;margin-top:10px;border:1px solid #c9d8e1;border-radius:12px;padding:12px;font:inherit;resize:vertical;background:#fff}

/* Glosario */
.glossary{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.glossary>div{background:var(--tl-soft);border:1px solid var(--tl-line);border-radius:14px;padding:12px 14px}
.glossary b{display:block;color:var(--tl-navy)}
.glossary span{font-size:14px;color:var(--tl-muted)}

/* Mini evaluación */
.miniquiz{display:grid;gap:12px}
.mq{background:var(--tl-soft);border:1px solid var(--tl-line);border-radius:14px;padding:14px 16px}
.mq>strong{display:block;color:var(--tl-navy);margin-bottom:8px}
.mq label{display:flex;gap:8px;align-items:flex-start;padding:7px 10px;border-radius:10px;cursor:pointer}
.mq label:hover{background:#e9f1f6}
.mq input{margin-top:5px}
.mq-feedback{display:none;margin-top:8px;font-size:14px;padding:8px 12px;border-radius:10px}
.mq-feedback.show{display:block}
.mq.correct{border-color:#9fd8c3;background:#effaf5}
.mq.correct .mq-feedback{background:#dff3ea;color:#14644f}
.mq.incorrect{border-color:#f1c2c5;background:#fdf3f4}
.mq.incorrect .mq-feedback{background:#fbe3e5;color:#8c2e34}
.lesson-shell .notice{background:#eef6fb;border:1px solid #cfe1ec;border-radius:12px;padding:12px 16px}

/* Botones */
.lesson-shell .btn,.lesson-shell .btn:visited{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 18px;border-radius:12px;font-weight:900;font-size:14px;text-decoration:none;border:0;cursor:pointer;font-family:inherit}
.lesson-shell .btn.primary{background:linear-gradient(135deg,var(--tl-green),#1f7fa8);color:#fff;box-shadow:0 8px 18px rgba(27,157,121,.22)}
.lesson-shell .btn.secondary{background:#fff;color:var(--tl-navy);border:1px solid var(--tl-line)}
.lesson-shell .btn:hover{filter:brightness(.96)}
.nextbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin:26px 0 8px}

/* ---------- Página de módulo ---------- */
.pagehero{background:linear-gradient(135deg,var(--tl-navy) 0%,#1d5677 100%);color:#fff;padding:36px 0 34px}
.pagehero .shell{width:min(1180px,calc(100% - 32px));margin:0 auto}
.pagehero .eyebrow{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.12em;color:#9fe3cf;margin-bottom:8px}
.pagehero h1{margin:0 0 10px;font-size:clamp(30px,4vw,44px);color:#fff}
.pagehero p{margin:0;color:#dcebf2;max-width:900px;font-size:17px;line-height:1.55}

.module-dashboard{width:min(1180px,calc(100% - 32px));margin:26px auto 40px;color:var(--tl-text)}
.module-dashboard *{box-sizing:border-box}
.module-overview{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-bottom:24px}
.module-summary-card,.module-progress-card{background:#fff;border:1px solid var(--tl-line);border-radius:22px;padding:22px 24px;box-shadow:0 10px 26px rgba(18,52,73,.06)}
.module-summary-card h2,.module-progress-card h2{margin:0 0 10px;color:var(--tl-navy);font-size:21px}
.module-progress-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.module-progress-item{background:var(--tl-soft);border:1px solid var(--tl-line);border-radius:14px;padding:12px}
.module-progress-item strong{display:block;font-size:24px;color:var(--tl-navy)}
.module-progress-item span{font-size:13px;color:var(--tl-muted)}
.module-progress-bar{height:10px;background:#e3edf2;border-radius:999px;overflow:hidden;margin-top:14px}
.module-progress-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--tl-green),#1f7fa8)}
.module-section-title{margin:6px 0 14px}
.module-section-title h2{margin:0 0 4px;color:var(--tl-navy);font-size:24px}
.module-section-title p{margin:0;color:var(--tl-muted)}

.lesson-tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px}
.lesson-tags span{font-size:12px;font-weight:800;background:#eef5f8;color:#36596e;border:1px solid #dbe7ee;padding:5px 10px;border-radius:999px}

.lesson-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.lesson-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--tl-line);border-top:4px solid var(--tl-green);border-radius:20px;padding:18px 20px;box-shadow:0 10px 24px rgba(18,52,73,.06);transition:transform .15s ease,box-shadow .15s ease}
.lesson-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(18,52,73,.11)}
.lesson-card.exam{border-top-color:var(--tl-orange);background:linear-gradient(135deg,#fff8ef,#fff 60%)}
.lesson-card h3{margin:10px 0 6px;color:var(--tl-navy);font-size:18px;line-height:1.3}
.lesson-card p{margin:0;color:var(--tl-muted);font-size:15px;line-height:1.5}
.lesson-card-top{display:flex;justify-content:space-between;align-items:center}
.lesson-number{background:var(--tl-navy);color:#fff;font-weight:900;border-radius:12px;padding:6px 12px;font-size:15px}
.lesson-state{font-size:12px;font-weight:800;color:var(--tl-green-d)}
.lesson-card-footer{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:6px}
.lesson-time{font-size:13px;color:var(--tl-muted);font-weight:700}
.lesson-open,.lesson-open:visited{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:12px;background:var(--tl-green);color:#fff!important;font-weight:900;font-size:14px;text-decoration:none}
.lesson-open:hover{background:var(--tl-green-d)}

/* ---------- Móvil ---------- */
@media(max-width:800px){
  .objectives,.study-grid,.example-grid,.three-grid,.real-media-grid,.scope,.glossary,.module-overview{grid-template-columns:1fr}
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .lesson-header{padding:22px 20px;border-radius:18px}
  .content-card{padding:20px 18px;border-radius:18px}
  .real-media img{height:210px}
  .nextbar{flex-direction:column}
  .nextbar .btn{width:100%}
  .compare-table{display:block;overflow-x:auto}
}