/* ── Reset / base ─────────────────────────────────── */
body { background-color: #fff6f6; }
h1   { text-align: center; }
h4   { font-size: 16px; font-weight: 700; }
ul   { list-style: none; padding-left: 0; }

/* ── Header ──────────────────────────────────────── */
#header {
    padding: 15px 0;
    background: white;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
    position: sticky; top: 0; z-index: 100;
}
#logo { max-height: 60px; }

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    flex-wrap: wrap;
}

/* Buscador */
#buscador-wrap { display: flex; gap: 5px; }
#buscador-wrap input {
    height: 36px;
    margin: 0;
    width: 200px;
}
#buscador-wrap button {
    height: 36px;
    padding: 0 12px;
    margin: 0;
    cursor: pointer;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: white;
}

/* Sesión */
#sesion-wrap { display: flex; align-items: center; gap: 8px; }
.btn-header {
    cursor: pointer;
    color: #741d51;
    font-weight: 600;
    font-size: 13px;
    padding: 4px 10px;
    border: 1px solid #e44e52;
    border-radius: 4px;
    transition: background .2s;
}
.btn-header:hover { background: #fff0f5; }

/* ── Carrito desplegable ─────────────────────────── */
.submenu { position: relative; }
#icono-carrito {
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    user-select: none;
}
#carrito-count {
    background: #e44e52;
    color: white;
    border-radius: 50%;
    padding: 0 5px;
    font-size: 12px;
    font-weight: bold;
    vertical-align: top;
}
.submenu #carrito { display: none; }
.submenu:hover #carrito {
    display: block;
    position: absolute;
    right: 0; top: 110%;
    background: white;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    padding: 15px;
    min-width: 320px;
    z-index: 200;
}
.vacio {
    padding: 10px;
    background: crimson;
    text-align: center;
    border-radius: 8px;
    color: white;
    margin: 8px 0;
}
.borrar-curso {
    background: red;
    border-radius: 50%;
    padding: 2px 7px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 12px;
}

/* ── Menú categorías ─────────────────────────────── */
#nav-categorias {
    background: linear-gradient(to right, #741d51, #e44e52);
    padding: 8px 0;
}
#menu-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
}
#menu-cats .cat-item {
    color: white;
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 13px;
    position: relative;
    transition: background .2s;
}
#menu-cats .cat-item:hover { background: rgba(255,255,255,.2); }
.submenu-cats {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    background: white;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    min-width: 180px;
    z-index: 150;
    padding: 8px 0;
}
.cat-padre:hover .submenu-cats { display: block; }
.submenu-cats .cat-item {
    color: #333;
    display: block;
    padding: 8px 16px;
    border-radius: 0;
}
.submenu-cats .cat-item:hover { background: #fff0f5; color: #741d51; }

/* ── Hero ────────────────────────────────────────── */
#hero {
    background-image: url(../img/hero.jpg);
    background-size: cover;
    background-position: center;
    height: 280px;
    display: flex;
    align-items: center;
}
.contenido-hero { color: white; }
.contenido-hero h2 { font-size: 2.5rem; margin-bottom: 5px; }

/* ── Barra iconos ────────────────────────────────── */
.barra {
    padding: 20px 0;
    background: linear-gradient(to right, #741d51, #e44e52);
}
.barra p { margin: 0; color: white; font-size: 14px; }
.icono {
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 55px;
    background-size: 28px;
    margin-bottom: 20px;
}
@media (min-width: 750px) { .icono { margin-bottom: 0; } }
.icono1 { background-image: url(../img/icono1.png); }
.icono2 { background-image: url(../img/icono2.png); }
.icono3 { background-image: url(../img/icono3.png); }

/* ── Grid de cursos ──────────────────────────────── */
#seccion-cursos { margin-top: 30px; margin-bottom: 40px; }
#encabezado { text-align: center; margin: 20px 0 25px; }

#lista-cursos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 0;
    margin: 0;
}
#lista-cursos > * {
    width: 100% !important;
    margin-left: 0 !important;
    float: none !important;
    box-sizing: border-box;
}
@media (max-width: 750px) {
    #lista-cursos { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 480px) {
    #lista-cursos { grid-template-columns: 1fr; }
}

/* ── Cards de cursos ─────────────────────────────── */
.card {
    background: white;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(0,0,0,.12); }

.imagen-curso {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.info-card {
    padding: 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.info-card p { margin-bottom: 4px; font-size: 13px; color: #666; }
.info-card h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.35;
    color: #222;
    flex: 1;
}

/* ── Estrellas CSS ── */
.estrellas {
    display: flex;
    gap: 2px;
    margin: 6px 0;
}
.estrella {
    font-size: 16px;
    line-height: 1;
}
.estrella.llena {
    color: #f5a623;
}
.estrella.media {
    color: #f5a623;
    opacity: 0.6;
}
.estrella.vacia {
    color: #ddd;
}

/* Precio */
.info-card .precio { font-size: 13px; text-decoration: line-through; color: #999; margin-bottom: 8px; }
.info-card .precio span { font-weight: 700; font-size: 18px; color: #222; text-decoration: none; }

/* Botón agregar al carrito */
.agregar-carrito {
    margin-top: auto;
    font-size: 11px !important;
    width: 100% !important;
    text-align: center;
    background: #1aa3c9 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px;
    height: 36px !important;
    line-height: 36px !important;
    letter-spacing: .08rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s;
    padding: 0 !important;
    display: block;
}
.agregar-carrito:hover { background: #148aaa !important; color: white !important; }

/* ── Modales ─────────────────────────────────────── */
.overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 300;
}
.modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 10px;
    padding: 30px;
    z-index: 400;
    min-width: 320px;
    max-width: 95vw;
    flex-direction: column;
    gap: 10px;
    max-height: 90vh;
    overflow-y: auto;
}
.modal-wide { width: min(525px, 95vw); }   /* 25% más estrecho */
.modal-cerrar {
    position: absolute; top: 10px; right: 15px;
    background: none; border: none;
    font-size: 20px; cursor: pointer; color: #666;
}
.modal h3 { margin-top: 0; }

/* Detalle curso */
.detalle-wrap { display: flex; gap: 25px; flex-wrap: wrap; }
.detalle-img   { width: 280px; max-width: 100%; border-radius: 8px; object-fit: cover; }
.detalle-info  { flex: 1; min-width: 200px; }
.detalle-cat   { background: #fff0f5; color: #741d51; padding: 2px 10px;
                 border-radius: 20px; font-size: 12px; font-weight: 600; }
.detalle-info h2 { margin-top: 10px; }

/* ── Footer ──────────────────────────────────────── */
.footer {
    margin-top: 40px;
    border-top: 1px solid #ccc;
    padding-top: 30px;
    padding-bottom: 30px;
}
.footer .menu a { display: block; margin-bottom: 8px; text-decoration: none; color: #555; }
.footer .menu a:hover { color: #741d51; }

/* ── Pedido card (perfil) ────────────────────────── */
.pedido-card {
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 15px;
    background: white;
}
.pedido-card p { margin-bottom: 6px; }
.pedido-card ul { margin: 0; padding-left: 15px; }
.pedido-card li { margin-bottom: 3px; font-size: 13px; }
/* ── SweetAlert dentro de modal ── */
.swal2-container {
    z-index: 9999 !important;  /* encima de overlay(300) y modal(400) */
}
.swal2-popup {
    width: auto !important;
    min-width: 300px !important;
    max-width: 90vw !important;
}
/* Popup "Compra realizada" 25% más ancho */
.swal-compra {
    width: 37.5rem !important;  /* defecto Swal es ~32rem */
}

/* ── Categoría activa en menú ── */
#menu-cats .cat-item.activo {
    background: rgba(255,255,255,0.25);
    font-weight: bold;
    border-radius: 4px;
}
/* ── Botón "Volver a la Tienda" ── */
/* Amber dorado sobre fondo claro: máximo contraste con la paleta magenta/rojo */
header .button,
header a.button {
    background: #f5a623 !important;
    color: white !important;
    border: none !important;
    font-weight: 700;
    border-radius: 5px;
    letter-spacing: .04rem;
    transition: background .2s;
}
header .button:hover,
header a.button:hover {
    background: #d48c10 !important;
    color: white !important;
}

/* ── Botón VACIAR — rojo oscuro (acción destructiva) ── */
#btn-vaciar {
    background: #c0392b !important;
    color: white !important;
    border: none !important;
    font-weight: 600;
    transition: background .2s;
}
#btn-vaciar:hover {
    background: #992d22 !important;
    color: white !important;
}

/* ── Botón COMPRAR — verde (acción positiva / CTA) ── */
#btn-checkout {
    background: #27ae60 !important;
    color: white !important;
    border: none !important;
    font-weight: 700;
    transition: background .2s;
}
#btn-checkout:hover {
    background: #1e8449 !important;
    color: white !important;
}

#btn-vaciar i,
#btn-checkout i {
    color: white;
    margin-right: 5px;
}