:root {
    --color-principal: #A83A65;
    --color-principal-fondo: #f7eef7;
    --color-principal-suave: #ffc4da80;
    --violeta-podcast: #7b38a8;
    --verde-cuestionario: #38a86a;
    --blanco: #fff;
    --negro: #111;
    --gris-texto: #323232;
    --gris-suave: #f2f2f2;
    --borde-suave: #e5e2e7;
}

/* Fuerza font-display:swap para FontAwesome por si el filtro PHP no aplica */
@font-face {
    font-family: 'FontAwesome';
    font-display: swap !important;
}

/* === BODY Y LAYOUT PRINCIPAL === */

.oc-main-layout {
    display: flex;
    align-items: flex-start;
    gap: 38px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    background: var(--gris-suave);
    padding: 0 32px;
    box-sizing: border-box;
}

/* === MENÚ LATERAL === */
.oc-filtros-lateral {
    min-width: 270px;
    max-width: 330px;
    width: 300px; /* Ancho fijo para evitar CLS */
    background: var(--blanco);
    border-radius: 20px;
    box-shadow: 0 4px 32px #A83A6513;
    padding: 32px 20px 36px 20px;
    margin: 38px 0 38px 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
    border: 1.5px solid var(--borde-suave);
}
.oc-filtros-lateral:focus-within {
    box-shadow: 0 8px 42px #A83A6520;
    outline: 2px solid var(--color-principal);
}

.oc-filtros-cat-title {
    font-size: 1.22em;
    color: var(--color-principal);
    font-weight: 600;
    margin-bottom: 20px;
    margin-top: 0;
    letter-spacing: .3px;
    text-align: left;
    padding-left: 7px;
    border-left: 4px solid var(--color-principal-fondo);
}


.oc-categorias-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.oc-categorias-list li {
    margin: 4px 0;
    border-radius: 12px;
    min-height: 44px;
    padding: 0;
    user-select: none;
    position: relative;
}

/* Elimina cualquier marcador de lista incluso con pseudo-elementos modernos */
.oc-categorias-list li,
.cat-submenu li {
    list-style-type: none !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    position: relative;
}

/* También para markers modernos (Safari, Chrome, Firefox nuevos) */
.oc-categorias-list li::marker,
.cat-submenu li::marker {
    content: "" !important;
    display: none !important;
}

/* Y si la plantilla añade puntos con ::before o ::after */
.oc-categorias-list li::before,
.cat-submenu li::before,
.oc-categorias-list li::after,
.cat-submenu li::after {
    content: none !important;
    display: none !important;
}


/* --- Botones Categoría Principal --- */
.oc-filtros-lateral .cat-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    background: none;
    border: none;
    color: var(--gris-texto);
    font-size: 1em;
    text-align: left;
    padding: 13px 16px 13px 19px;
    border-radius: 11px;
    font-weight: 500;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    min-height: 44px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.oc-filtros-lateral .cat-btn .cat-icon {
    font-size: 1.08em;
    margin-right: 2px;
    opacity: 0.85;
    color: var(--color-principal);
}

/* Hover/Focus solo color y borde, sin movimiento ni sombra */
.oc-filtros-lateral .cat-btn:hover,
.oc-filtros-lateral .cat-btn:focus-visible {
    background: var(--color-principal-fondo);
    color: var(--color-principal);
    outline: 2px solid var(--color-principal);
    font-weight: 600;
}
.oc-filtros-lateral .cat-btn:hover .cat-icon,
.oc-filtros-lateral .cat-btn:focus-visible .cat-icon {
    color: var(--color-principal);
    opacity: 1;
}
.oc-filtros-lateral .cat-btn:active {
    background: #ffd8ea;
    color: var(--color-principal);
    outline: 2px solid var(--color-principal);
}

/* Activo: fondo marcado */
.oc-filtros-lateral .cat-activo > .cat-btn {
    background: var(--color-principal-suave);
    border-left: 5px solid var(--color-principal);
    color: var(--color-principal);
    font-weight: 700;
    outline: none;
}
.oc-filtros-lateral .cat-activo > .cat-btn .cat-icon {
    color: var(--color-principal);
    opacity: 1;
}
.oc-filtros-lateral .cat-activo > .cat-btn:hover,
.oc-filtros-lateral .cat-activo > .cat-btn:focus-visible {
    outline: none;
    background: var(--color-principal-suave);
}

/* --- Flecha Menú --- */
.cat-padre .cat-arrow {
    display: inline-block;
    margin-right: 8px;
    font-size: 1.16em;
    opacity: .64;
    color: #d3aac7;
}
.cat-padre.cat-open > .cat-btn .cat-arrow {
    transform: rotate(90deg);
}
.cat-padre:not(.cat-open) > .cat-btn .cat-arrow {
    transform: rotate(0deg);
}
.cat-padre .cat-btn:hover .cat-arrow,
.cat-padre .cat-btn:focus-visible .cat-arrow,
.cat-padre.cat-open .cat-btn .cat-arrow {
    color: var(--color-principal);
    opacity: 1;
}

/* --- Submenú --- */
.cat-submenu {
    margin: 0 0 0 18px;
    padding: 0;
    display: none;
    flex-direction: column;
}
.cat-padre.cat-open > .cat-submenu {
    display: flex;
}
.cat-submenu li {
    background: none;
    color: #3a3a3a;
    border-radius: 8px;
    font-size: 1em;
    padding: 9px 9px 9px 27px;
    margin-bottom: 2px;
    min-height: 36px;
    display: flex;
    align-items: center;
    font-weight: 500;
    gap: 8px;
    outline: none;
    user-select: none;
    cursor: pointer;
}
.cat-submenu li:hover,
.cat-submenu li:focus-visible {
    background: var(--color-principal-fondo);
    color: var(--color-principal);
    font-weight: 600;
    outline: 2px solid var(--color-principal);
}
.cat-submenu li.cat-activo {
    background: var(--color-principal-suave);
    color: var(--color-principal);
    font-weight: 700;
    outline: none;
}
.cat-submenu li.cat-activo:hover,
.cat-submenu li.cat-activo:focus-visible {
    outline: none;
}
.cat-submenu li:active {
    background: #ffd8ea;
    color: var(--color-principal);
}

.cat-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--color-principal);
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: middle;
    opacity: .74;
}
.cat-nombre {
    vertical-align: middle;
    font-size: 1em;
    padding: 0;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Separador */
.oc-filtros-lateral .oc-separator {
    height: 2px;
    background: linear-gradient(90deg, #ffc4da80,#f7eef7 90%);
    border-radius: 2px;
    margin: 18px 0 10px 0;
    border: none;
    width: 85%;
    align-self: center;
}

/* === CONTENIDO PRINCIPAL === */
.oc-content-grid {
    flex: 1 1 0;
    min-width: 0;
    padding: 32px 12px 36px 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* === BARRA DE FILTROS === */
.oc-filtros-bar {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 21px;
    align-items: center;
    background: var(--blanco);
    border-radius: 15px;
    box-shadow: 0 2px 14px #A83A6509;
    padding: 19px 22px 10px 22px;
}
.oc-buscador-box {
    width: 100%;
    position: relative;
    margin: 0;
    flex: none;
}
#oc-buscador {
    border-radius: 10px;
    padding: 11px 44px 11px 14px;
    border: 1.5px solid var(--borde-suave);
    font-size: 16px;
    background: #fff;
    width: 100%;
    box-shadow: 0 1px 7px #A83A6511;
    color: var(--negro);
}
#oc-buscador:focus {
    outline: 2px solid var(--color-principal);
    border-color: var(--color-principal);
}

/* === BOTÓN BUSCAR ESTÁTICO === */
.oc-btn-buscar {
    position: absolute;
    right: 10px;
    top: 10px;
    background: var(--color-principal-fondo);
    border: none;
    cursor: pointer;
    padding: 7px 12px;
    border-radius: 50px;
    color: var(--color-principal);
    font-size: 1.2em;
    opacity: 1;
    outline: none;
}
.oc-btn-buscar:hover,
.oc-btn-buscar:focus {
    background: var(--color-principal);
    color: #fff;
}

/* CHIPS */
.oc-tipos-chips {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0 auto 0 auto;
    justify-content: center;
}
.oc-chip {
    cursor: pointer;
    border-radius: 18px;
    background: var(--color-principal-fondo);
    color: var(--color-principal);
    font-weight: 500;
    padding: 8px 18px 8px 14px;
    border: 2px solid var(--color-principal-suave);
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    box-sizing: border-box;
}
.oc-chip-active,
.oc-chip:hover {
    background: var(--color-principal);
    color: #fff !important;
    border-color: var(--color-principal);
}
.oc-chip:focus-visible {
    outline: 2px solid var(--color-principal);
    background: var(--color-principal-fondo);
    color: var(--color-principal) !important;
}
.oc-chip i {
    margin-right: 3px;
    min-width: 16px;
    font-size: 1.07em;
}

/* === GRID DE CURSOS === */
.opocamp-cursos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 28px;
    margin-top: 12px;
    width: 100%;
    justify-items: center;
    min-height: 650px; /* Evita saltos al cargar AJAX (ajusta a tus cursos) */
    transition: min-height 0.2s;
}
.opocamp-cursos-grid > .opocamp-curso-card {
    width: 100%;
    max-width: 360px;
}
.opocamp-curso-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 3px 18px #A83A6511;
    overflow: hidden;
    border: 1.5px solid var(--borde-suave);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.opocamp-curso-card:hover,
.opocamp-curso-card:focus-within {
    border-color: var(--color-principal);
}
.opocamp-curso-card img {
    width: 100%;
    height: 191px;
    min-height: 191px;
    aspect-ratio: 300 / 191;
    object-fit: cover;
    display: block;
}

#opocamp-cursos-resultados {
    min-height: 700px; /* Reserva espacio al cargar */
}

.curso-card-content {
    padding: 21px 18px 21px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
}
.curso-card-content h3 {
    font-size: 1.09em;
    margin: 0 0 4px 0;
    font-weight: 600;
    text-align: center;
    word-break: break-word;
    color: var(--negro);
    letter-spacing: 0.01em;
}
.curso-card-content h3 a {
    color: var(--negro);
    text-decoration: none;
}
.curso-card-content h3 a:hover,
.curso-card-content h3 a:focus-visible {
    color: var(--color-principal);
}

/* Etiquetas categoría y tipo */
.curso-card-content .curso-cat,
.curso-card-content .curso-tipo {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    border-radius: 7px;
    padding: 4px 12px;
    margin: 0 6px 6px 0;
    text-align: center;
    border: 1.5px solid transparent;
    background: #f7eef7;
    color: var(--color-principal);
    letter-spacing: .2px;
    min-width: 98px;
}
.curso-card-content .curso-tipo[data-tipo="Video"] {
    background: #A83A65;
    color: #fff;
    border-color: #A83A65;
}
.curso-card-content .curso-tipo[data-tipo="Podcast"] {
    background: var(--violeta-podcast);
    color: #fff;
    border-color: var(--violeta-podcast);
}
.curso-card-content .curso-tipo[data-tipo="Cuestionario"] {
    background: var(--verde-cuestionario);
    color: #fff;
    border-color: var(--verde-cuestionario);
}

/* Botón Ver materia (sin movimiento ni sombra) */
.curso-card-content .curso-btn {
    display: block;
    margin: 6px auto 0 auto;
    color: #fff;
    background: var(--color-principal);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border-radius: 50px;
    padding: 13px 28px;
    border: none;
    text-align: center;
    min-width: 120px;
    text-transform: uppercase;
    letter-spacing: 0.24px;
    font-family: 'Montserrat', Arial, sans-serif;
}
.curso-card-content .curso-btn:hover, 
.curso-card-content .curso-btn:focus-visible {
    background: var(--color-principal-fondo);
    color: var(--color-principal) !important;
    outline: 2px solid var(--color-principal);
    border: 1.5px solid var(--color-principal);
}

/* Paginación visible y diferenciada */
.opocamp-pagination {
    margin: 32px 0 12px 0;
    text-align: center;
}
.opocamp-pagination a {
    display: inline-block;
    padding: 10px 22px;
    margin: 0 5px;
    border-radius: 20px;
    color: var(--color-principal);
    background: #fff;
    text-decoration: none;
    font-weight: 600;
    border: 1.5px solid var(--color-principal-fondo);
    font-size: 16px;
}
.opocamp-pagination a:hover,
.opocamp-pagination a:focus-visible {
    background: var(--color-principal-fondo);
    color: var(--color-principal);
    border-color: var(--color-principal);
}
.opocamp-pagination .active {
    background: var(--color-principal);
    color: #fff !important;
    border-color: var(--color-principal);
}

/* Mensajes informativos */
.opocamp-no-results,
.opocamp-loading {
    padding: 34px 0 32px 0;
    text-align: center;
    color: var(--color-principal);
    font-size: 1.09em;
    background: var(--color-principal-fondo);
    border-radius: 12px;
    margin-top: 20px;
    font-weight: 500;
}

/* === RESPONSIVE === */
@media (max-width: 1100px) {
    .oc-main-layout {
        flex-direction: column;
        max-width: 100vw;
        gap: 0;
        padding: 0 16px;
    }
    .oc-filtros-lateral {
        margin: 16px 0 20px 0;
        max-width: 98vw;
    }
    .oc-content-grid {
        padding: 12px 2px 24px 2px;
    }
}
@media (max-width: 800px) {
    .oc-main-layout {
        padding: 0 8px;
    }
    .opocamp-cursos-grid {
        grid-template-columns: 1fr;
    }
    .oc-filtros-bar {
        padding: 10px 4px 2px 4px;
    }
    .oc-filtros-lateral {
        padding: 10px 5px;
    }
    .curso-card-content {
        padding: 14px 6px 14px 6px;
        gap: 10px;
    }
}

/* --- Mejora legibilidad selección, placeholder, etc. --- */
::selection {
    background: #ffd8ea;
    color: var(--color-principal);
}
input::placeholder, textarea::placeholder {
    color: #a69aaa;
    opacity: 1;
}

.oc-spinner {
    display: inline-block;
    width: 1.7em;
    height: 1.7em;
    border: 3px solid var(--color-principal-fondo);
    border-radius: 50%;
    border-top: 3px solid var(--color-principal);
    animation: oc-spin 0.85s linear infinite;
    margin-right: 12px;
    vertical-align: middle;
}
@keyframes oc-spin {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

/* Corregir problemas de margen/padding/centrado en móvil */

html, body {
  box-sizing: border-box;
  width: 100vw;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Layout principal en móvil: que no tenga padding/margen derecho extra */
@media (max-width: 1100px) {
  .oc-main-layout {
      flex-direction: column;
      max-width: 100vw;
      width: 100vw;
      gap: 0;
      padding: 0; /* Cambia a 0 */
      margin: 0 auto;
      box-sizing: border-box;
  }
  .oc-filtros-lateral {
      margin: 16px 0 20px 0;
      max-width: 100vw;
      width: 100%;
      min-width: 0;
      padding: 10px 5px;
      box-sizing: border-box;
  }
  .oc-content-grid {
      padding: 12px 2px 24px 2px;
      width: 100vw;
      box-sizing: border-box;
  }
}
@media (max-width: 800px) {
  .oc-main-layout {
      padding: 0; /* Quita cualquier padding lateral */
      width: 100vw;
      max-width: 100vw;
  }
  .opocamp-cursos-grid {
      grid-template-columns: 1fr;
      width: 100vw;
      box-sizing: border-box;
  }
  .oc-filtros-bar {
      padding: 10px 4px 2px 4px;
  }
  .oc-filtros-lateral {
      padding: 10px 5px;
      width: 100vw;
      max-width: 100vw;
      min-width: 0;
  }
  .curso-card-content {
      padding: 14px 6px 14px 6px;
      gap: 10px;
  }
}