/* ============================================================================
   MOISÉS MOTA · MY DIGITAL WORLD — PUENTE BOOTSTRAP → OSCURO (Fase 2)
   ----------------------------------------------------------------------------
   Las páginas internas (/servicios, /portafolio, /blog, /sobre-mi, /contacto)
   siguen maquetadas con Bootstrap 5. En vez de reescribirlas, esta hoja adapta
   los componentes de Bootstrap a la identidad oscura de la portada.

   Se carga última, después de bootstrap, app.css (Vite) y mm-shell.css.
   Para revertir: quitar el <link> de layouts/mm-site.blade.php.
   ========================================================================== */

/* ============================================
   BASE
   ============================================ */
body {
    background: var(--background);
    color: var(--text-primary);
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    overflow-x: hidden;
}

.mm-inner main { padding-top: 92px; }

h1, h2, h3, h4, h5, h6 { color: var(--text-primary); }

p, li, dd, dt, span, label, blockquote { color: inherit; }

a { color: var(--primary); }
a:hover { color: var(--primary-dark); }

hr { border-color: var(--border-color); opacity: 1; }

/* Bootstrap pinta muchos textos con estas utilidades */
.text-muted,
.text-secondary,
small.text-muted {
    color: var(--text-secondary) !important;
}
.text-dark,
.text-black { color: var(--text-primary) !important; }
.text-body { color: var(--text-primary) !important; }

/* Excepción: sobre fondos de color claro el texto vuelve a ser oscuro,
   porque ahí lo que cambia es el fondo, no el tema. */
.bg-warning, .bg-warning *,
.bg-info, .bg-info *,
.bg-success, .bg-success *,
.bg-primary, .bg-primary * { color: #06111f !important; }
.bg-warning a, .bg-info a, .bg-success a, .bg-primary a { color: #06111f !important; }

/* ============================================
   SUPERFICIES
   ============================================ */
.bg-white,
.bg-light,
.bg-body,
.bg-body-tertiary {
    background: var(--background-secondary) !important;
    color: var(--text-primary) !important;
}

.card,
.accordion-item,
.list-group-item {
    background: linear-gradient(180deg, rgba(15, 23, 42, .78) 0%, rgba(3, 7, 18, .78) 100%);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    color: var(--text-primary);
}

.card-header,
.card-footer {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-primary);
}

.card-title { color: var(--text-primary); }
.card-text { color: var(--text-secondary); }

.border,
.border-top,
.border-bottom,
.border-start,
.border-end { border-color: var(--border-color) !important; }

.shadow,
.shadow-sm,
.shadow-lg { box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .9) !important; }

/* Recuadros y textos claros escritos con estilos en línea dentro de las
   vistas. Se neutralizan por si queda alguno sin migrar: un color puesto en
   el atributo style gana a cualquier hoja, salvo con !important. */
[style*="background: #ffffff"],
[style*="background:#ffffff"],
[style*="background: #fff;"],
[style*="background:#fff;"],
[style*="background-color: #ffffff"],
[style*="background: #f8fafc"],
[style*="background:#f8fafc"],
[style*="background-color: #f8fafc"],
[style*="background: #f1f5f9"] {
    background: linear-gradient(180deg, rgba(15, 23, 42, .8), rgba(3, 7, 18, .8)) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Texto oscuro forzado en línea: sobre fondo oscuro es ilegible */
[style*="color: #0f172a"],
[style*="color:#0f172a"],
[style*="color: #1e293b"],
[style*="color:#1e293b"],
[style*="color: #334155"] {
    color: var(--text-secondary) !important;
}

/* Cuerpo de artículo: el texto largo de servicios y del blog */
.article-content,
.article-content * {
    color: var(--text-secondary);
}
.article-content strong,
.article-content b,
.article-content h1, .article-content h2,
.article-content h3, .article-content h4 { color: var(--text-primary); }
.article-content a { color: var(--primary); }

/* Lista de "Otros servicios" y similares */
.list-group,
.list-group-flush { background: transparent; }
.list-group-item,
.list-group-item-action {
    background: transparent !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
.list-group-item-action:hover,
.list-group-item-action:focus,
.list-group-item-action.active,
.list-group-item.active {
    background: rgba(6, 182, 212, .10) !important;
    border-color: rgba(6, 182, 212, .3) !important;
    color: var(--text-primary) !important;
}
.list-group-item .muted-mini,
.list-group-item .text-muted { color: var(--text-secondary) !important; }

/* ============================================
   BOTONES
   ============================================ */
.btn {
    border-radius: 12px;
    font-weight: 600;
    transition: transform .28s var(--mm-shell-ease), box-shadow .28s var(--mm-shell-ease),
                background-color .28s var(--mm-shell-ease), border-color .28s var(--mm-shell-ease);
}
.btn:hover { transform: translateY(-2px); }

.btn-primary,
.btn-cta {
    background: var(--gradient-primary);
    border: none;
    color: #041018;
    box-shadow: 0 10px 26px -10px var(--primary-glow);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-cta:hover,
.btn-cta:focus {
    background: var(--gradient-primary);
    color: #041018;
    box-shadow: 0 16px 34px -12px var(--primary-glow);
}

.btn-outline,
.btn-outline-light,
.btn-outline-primary,
.btn-outline-secondary,
.btn-secondary {
    background: rgba(148, 163, 184, .07);
    border: 1px solid rgba(148, 163, 184, .28);
    color: var(--text-primary);
}
.btn-outline:hover,
.btn-outline-light:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-secondary:hover {
    background: rgba(6, 182, 212, .14);
    border-color: var(--primary);
    color: var(--text-primary);
}

.btn-link { color: var(--primary); text-decoration: none; }
.btn-link:hover { color: var(--text-primary); }

/* ============================================
   FORMULARIOS
   ============================================ */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select {
    background: rgba(15, 23, 42, .7);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
}
.form-control::placeholder,
textarea::placeholder { color: var(--text-muted); }

.form-control:focus,
.form-select:focus,
textarea:focus,
select:focus {
    background: rgba(15, 23, 42, .9);
    border-color: var(--primary);
    color: var(--text-primary);
    box-shadow: 0 0 0 .2rem rgba(6, 182, 212, .18);
}

.form-label, .form-check-label { color: var(--text-secondary); }
.form-select option { background: var(--background-secondary); color: var(--text-primary); }
.input-group-text {
    background: rgba(15, 23, 42, .8);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* ============================================
   COMPONENTES VARIOS
   ============================================ */
.badge,
.badge-featured {
    background: rgba(6, 182, 212, .14);
    border: 1px solid rgba(6, 182, 212, .3);
    color: #7de3f4;
    border-radius: 999px;
    font-weight: 600;
}

.breadcrumb { background: transparent; }
.breadcrumb-item,
.breadcrumb-item a { color: var(--text-secondary); }
.breadcrumb-item.active { color: var(--text-primary); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }

.pagination .page-link {
    background: rgba(15, 23, 42, .7);
    border-color: var(--border-color);
    color: var(--text-secondary);
}
.pagination .page-link:hover {
    background: rgba(6, 182, 212, .14);
    border-color: var(--primary);
    color: var(--text-primary);
}
.pagination .page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
    color: #041018;
}
.pagination .page-item.disabled .page-link {
    background: rgba(15, 23, 42, .4);
    color: var(--text-secondary);
}

.table { color: var(--text-secondary); }
.table > :not(caption) > * > * {
    background: transparent;
    border-color: var(--border-color);
    color: inherit;
}
.table thead th { color: var(--text-primary); }

.alert {
    background: rgba(15, 23, 42, .8);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
.alert-success { border-color: rgba(16, 185, 129, .45); }
.alert-danger { border-color: rgba(239, 68, 68, .45); }

.accordion-button {
    background: transparent;
    color: var(--text-primary);
}
.accordion-button:not(.collapsed) {
    background: rgba(6, 182, 212, .1);
    color: var(--text-primary);
    box-shadow: none;
}
.accordion-body { color: var(--text-secondary); }

/* Bloques heredados del tema anterior */
.hero-gradient {
    background:
        radial-gradient(900px circle at 15% 0%, rgba(6, 182, 212, .22), transparent 55%),
        radial-gradient(700px circle at 88% 15%, rgba(139, 92, 246, .18), transparent 55%),
        linear-gradient(180deg, #030712 0%, #0b1324 100%);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}
.hero-gradient .hero-subtitle,
.hero-subtitle { color: var(--text-secondary); }

.text-gradient {
    background: linear-gradient(110deg, var(--mm-rent), var(--mm-mkt) 55%, var(--mm-ia));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.service-card {
    background: linear-gradient(180deg, rgba(15, 23, 42, .8) 0%, rgba(3, 7, 18, .8) 100%);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: none;
    transition: transform .4s var(--mm-shell-ease), border-color .4s var(--mm-shell-ease),
                box-shadow .4s var(--mm-shell-ease);
}
.service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(6, 182, 212, .4);
    box-shadow: 0 28px 56px -30px var(--primary-glow);
}

.service-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--primary);
    background: rgba(6, 182, 212, .12);
    border: 1px solid rgba(6, 182, 212, .28);
}

.value-list { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 9px; }
.value-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--text-secondary);
    font-size: .93rem;
    line-height: 1.6;
}
.value-list li i { color: var(--primary); margin-top: .3em; flex: 0 0 auto; }

.price-from {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.35rem;
    margin: 0;
}
.muted-mini { color: var(--text-secondary); font-size: .8rem; }

/* Imágenes de artículos y portafolio */
.card img,
.post-image img,
.portfolio-image img { border-radius: 14px; }

/* ============================================
   ACCESIBILIDAD
   ============================================ */
.mm-inner a:focus-visible,
.mm-inner button:focus-visible,
.mm-inner input:focus-visible,
.mm-inner select:focus-visible,
.mm-inner textarea:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

@media (max-width: 768px) {
    .mm-inner main { padding-top: 80px; }
}

@media (prefers-reduced-motion: reduce) {
    .btn:hover,
    .service-card:hover { transform: none; }
    .btn, .service-card { transition: none; }
}