/* ==========================================================================
   CONTENIDOEXTRA.CSS — Estilos para episodios clave, listado completo, cronología
   Importa especiales.css para hero, info-card, etc.
   ========================================================================== */
@import url('especiales.css');

/* Section Titles */
.section-title { font-size: 1.3rem; font-weight: 700; margin: 2rem 0 1rem; color: #2c3e50; }
.section-title i { color: #28a745; }

/* Accordion (episodios clave) */
.accordion-item { border: none; border-radius: 10px !important; overflow: hidden; margin-bottom: 0.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.accordion-button { font-weight: 600; font-size: 0.95rem; padding: 14px 18px; background: #f8f9fa; }
.accordion-button:not(.collapsed) { background: #28a745; color: #fff; box-shadow: none; }
.accordion-button:not(.collapsed)::after { filter: brightness(0) invert(1); }
.accordion-body { padding: 0; }
.accordion-body table { margin: 0; font-size: 0.88rem; }
.accordion-body table td { padding: 10px 16px; border-color: #eee; }

/* Table Card (listado completo) */
.table-card { border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.table-card .table { margin: 0; font-size: 0.82rem; }
.table-card .table th { font-size: 0.78rem; text-align: center; vertical-align: middle; white-space: nowrap; background: #f8f9fa; border-bottom: 2px solid #28a745; }
.table-card .table td { vertical-align: middle; }

/* Search Input */
#myInput { border: 1.5px solid #6c757d; background: #fff; color: #333; border-radius: 6px; }
#myInput:focus { border-color: #28a745; box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15); }
#myInput::placeholder { color: #888; }
.form-check-label { color: #333; font-weight: 500; }

/* Dark Mode — Contenido Extra */
[data-bs-theme="dark"] .section-title { color: #e0e0e0; }
[data-bs-theme="dark"] .accordion-item { box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
[data-bs-theme="dark"] .accordion-button { background: #252a30; color: #e0e0e0; }
[data-bs-theme="dark"] .accordion-button:not(.collapsed) { background: #28a745; color: #fff; }
[data-bs-theme="dark"] .accordion-body table { background: #1e2228; }
[data-bs-theme="dark"] .accordion-body table td { color: #ccc; border-color: #333; }
[data-bs-theme="dark"] .table-card { background: #1e2228; box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
[data-bs-theme="dark"] .table-card .table th { background: #252a30; color: #fff; }
[data-bs-theme="dark"] .table-card .table td { color: #ccc; }
[data-bs-theme="dark"] .table-card .table-striped > tbody > tr:nth-of-type(odd) > * { color: #ccc; --bs-table-bg-type: rgba(255,255,255,0.02); }
[data-bs-theme="dark"] #myInput { background: #1e2228; border-color: #555; color: #e0e0e0; }
[data-bs-theme="dark"] #myInput::placeholder { color: #888; }
[data-bs-theme="dark"] .form-check-label { color: #ccc; }

/* Mobile — Contenido Extra */
@media (max-width: 768px) {
    .table-card .table { font-size: 0.72rem; }
    .table-card .table th { font-size: 0.68rem; padding: 6px 4px; }
    .table-card .table td { padding: 6px 4px; }
}