/* ==========================================================
   DISEÑO MODO SEBAS / JESUS
   ========================================================== */
:root {
    /* Variables Modo Claro (Por defecto) */
    --bg-main: #ffffff;
    --bg-card: #ffffff;
    --bg-input: #f9f9f9;
    --bg-pill: #f1f2f6;
    --primary: #ff6b00; 
    --primary-hover: #e65c00;
    --text-main: #333333;
    --text-muted: #747d8c;
    --border-color: #eeeeee;
    --radius: 8px;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* --- CLASE MODO JESUS (Se activa con JS) --- */
html.dark-mode { /*Esta madre permite que el tema cargue antes que el cuerpo de la página*/
    --bg-main: #121212;
    --bg-card: #1e1e1e;
    --bg-input: #2a2a2a;
    --bg-pill: #333333;
    --text-main: #f5f6fa;
    --text-muted: #b2bec3;
    --border-color: #333333;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    transition: background-color 0.3s, color 0.3s; /* Transición suave al cambiar de tema */
}

/* Menú Superior */
.top-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 15px 40px;
    gap: 30px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-main);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    transition: color 0.2s;
    padding: 8px 15px;
    border-radius: var(--radius);
    cursor: pointer;
}

.nav-item svg {
    width: 24px;
    height: 24px;
    margin-bottom: 6px;
    stroke: currentColor;
    fill: none;
    transition: stroke 0.2s;
}

.empty-state svg {
    width: 64px;
    height: 64px;
    stroke: var(--border-color);
    fill: none;
    margin-bottom: 15px;
}

.nav-item:hover { color: var(--primary); }
.nav-item.active { background-color: var(--primary); color: white; }

/* Píldoras de Categoría */
.category-filter {
    display: flex;
    gap: 12px;
    padding: 20px 40px;
    overflow-x: auto;
}

.cat-btn {
    background: var(--bg-pill);
    color: var(--text-muted);
    padding: 8px 18px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.cat-btn:hover { background: var(--border-color); color: var(--text-main); }
.cat-btn.active { background: var(--primary); color: white; }

/* =================================================
   CARRUSEL CROSSFADE QLERO DE JISUS
   ================================================= */
.hero-banner {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: fade 15s infinite; /* Animación de 15 segundos que se repite */
}

/* Imágenes del carrusel y tiempos de aparición */
.slide-1 { background-image: url('https://images.unsplash.com/photo-1514933651103-005eec06c04b?q=80&w=1934&auto=format&fit=crop'); animation-delay: 0s; }
.slide-2 { background-image: url('https://images.unsplash.com/photo-1550966871-3ed3cdb5ed0c?q=80&w=1934&auto=format&fit=crop'); animation-delay: 5s; }
.slide-3 { background-image: url('https://images.unsplash.com/photo-1555396273-367ea4eb4db5?q=80&w=1934&auto=format&fit=crop'); animation-delay: 10s; }

/* La magia del crossfade */
@keyframes fade {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    33%  { opacity: 1; }
    43%  { opacity: 0; }
    100% { opacity: 0; }
}

/* Buscador */
.search-bar-container { padding: 30px 40px; }
.search-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 15px 25px;
    border-radius: 30px;
    font-size: 15px;
    color: var(--text-main);
    box-sizing: border-box;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}
.search-input:focus { outline: none; border-color: var(--primary); }

/* Contenedor Principal */
.container { max-width: 1000px; margin: 0 auto; padding: 20px 40px; }

.section-title {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    margin-top: 10px;
    margin-bottom: 30px;
    color: var(--text-main);
}
.section-title::after {
    content: ''; display: block; width: 60px; height: 3px;
    background: linear-gradient(90deg, var(--primary), #ff8c00);
    margin: 10px auto 0;
}

/* Empty State */
.empty-state { text-align: center; padding: 50px 20px; }
.empty-state i { font-size: 50px; color: var(--border-color); font-style: normal; margin-bottom: 15px; display: inline-block; }
.empty-state h3 { margin: 0 0 10px 0; color: var(--text-main); }
.empty-state p { color: var(--text-muted); margin-bottom: 25px; }

/* ==========================================================
   Botones (Enlaces y Botones de Formulario)
   ========================================================== */

/* Clase base para todos los botones */
.btn, .btn-gradient, .btn-secondary, button[type="submit"] {
    display: inline-block;
    padding: 12px 30px;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    box-sizing: border-box;
}

.btn-primary, .btn-gradient, button[type="submit"] {
    background: linear-gradient(90deg, var(--primary), #ff6b6b);
    color: white;
    width: 100%; /* Por defecto, que ocupe todo el ancho en los formularios */
}

.btn-primary:hover, .btn-gradient:hover, button[type="submit"]:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.btn-secondary {
    background-color: var(--bg-pill);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background-color: var(--border-color);
    color: var(--text-main);
}

.btn-inline {
    width: auto;
}

/* ==========================================
   ÍCONOS SVG GLOBALES
   ========================================== */
.icon-sm {
    width: 18px;
    height: 18px;
    vertical-align: text-bottom;
    margin-right: 6px;
    stroke: currentColor;
    fill: none;
}
.icon-fill {
    fill: currentColor;
    stroke: none;
}

/* ==========================================
   ESTILOS DE FORMULARIOS GLOBALES
   ========================================== */
.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-main);
    font-size: 14px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
select,
textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-sizing: border-box;
    font-size: 15px;
    background-color: var(--bg-input);
    color: var(--text-main);
    transition: all 0.2s;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15);
}

.card {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}