/**
 * ARK-IA · Tema visual compartido (verde metalizado)
 * Se aplica solo dentro de contenedores con la clase .ark-theme
 * y en los elementos .ark-hero / .ark-card, sin afectar al resto de la plataforma.
 */

/* ---------- Encabezado verde metalizado ---------- */
.ark-hero {
    background:
        linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.10) 45%, rgba(255,255,255,0) 60%),
        radial-gradient(circle at 92% 0%, rgba(0,255,162,.28) 0%, rgba(0,255,162,0) 40%),
        linear-gradient(135deg, #03140d 0%, #06301f 35%, #0a5a3c 70%, #0f8a5c 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 30px rgba(3,40,26,.25);
    border-radius: 18px;
    padding: 24px 28px;
    color: #fff;
    margin-bottom: 1.5rem;
}
.ark-hero h3 { font-weight: 800; letter-spacing: -.5px; margin: 0 0 4px; color: #fff; }
.ark-hero p { color: #b7f0d6; margin: 0; font-size: 14px; }
.ark-hero .ark-back { display: inline-flex; align-items: center; gap: 6px; color: #a7f3d0; font-size: 13px; font-weight: 600; text-decoration: none; margin-bottom: 8px; }
.ark-hero .ark-back:hover { color: #fff; }
.ark-hero .btn { transition: transform .15s, box-shadow .15s; }
.ark-hero .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.ark-hero .btn-light { font-weight: 700; color: #064e3b; }
.ark-hero .btn-outline-light { font-weight: 600; border-color: rgba(255,255,255,.45); }
.ark-hero .btn-neon { background: #00ffa2; border-color: #00ffa2; color: #03140d; font-weight: 800; }
.ark-hero .btn-neon:hover { background: #4dffbf; border-color: #4dffbf; color: #03140d; }
.ark-hero .ark-chip { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border: 1px solid rgba(167,243,208,.28); border-radius: 50px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: #d1fae5; }

/* ---------- Tarjetas ---------- */
.ark-theme .card, .ark-card {
    background: #fff;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: none;
    transition: box-shadow .2s ease, border-color .2s ease;
    overflow: hidden;
}
.ark-theme .card:hover, .ark-card:hover { box-shadow: 0 12px 30px rgba(15,23,42,.06); border-color: #bbf7d0 !important; transform: none; }
.ark-theme .card-header {
    background: #fff !important;
    color: #0f172a !important;
    border-bottom: 1px solid #eef2f0 !important;
    padding: 14px 18px;
    font-weight: 700;
}
.ark-theme .card-header .card-title, .ark-theme .card-header h5, .ark-theme .card-header h6 { color: #0f172a !important; font-weight: 800; font-size: 15px; }
.ark-theme .card-header.bg-primary, .ark-theme .card-header.bg-success {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
    color: #065f46 !important;
}

/* ---------- Botones ---------- */
.ark-theme .btn-primary, .ark-theme .btn-success, .ark-theme .btn-brand {
    background: linear-gradient(135deg, #10b981, #047857);
    border-color: #047857;
    color: #fff;
    font-weight: 600;
}
.ark-theme .btn-primary:hover, .ark-theme .btn-success:hover, .ark-theme .btn-brand:hover,
.ark-theme .btn-primary:focus, .ark-theme .btn-success:focus {
    background: linear-gradient(135deg, #059669, #065f46);
    border-color: #065f46;
    color: #fff;
}
.ark-theme .btn-outline-primary { color: #047857; border-color: #6ee7b7; }
.ark-theme .btn-outline-primary:hover { background: #ecfdf5; color: #065f46; border-color: #10b981; }
.ark-theme .btn { border-radius: 10px; }

/* ---------- Formularios ---------- */
.ark-theme .form-control, .ark-theme .form-select { border-radius: 10px; }
.ark-theme .form-control:focus, .ark-theme .form-select:focus { border-color: #10b981; box-shadow: 0 0 0 .2rem rgba(16,185,129,.18); }
.ark-theme .form-label { font-weight: 600; color: #334155; }

/* ---------- Pestañas / pills ---------- */
.ark-theme .nav-pills .nav-link { border-radius: 10px; font-weight: 700; color: #475569; }
.ark-theme .nav-pills .nav-link.active { background: linear-gradient(135deg, #10b981, #047857); color: #fff; }

/* ---------- Modales ---------- */
.ark-theme ~ .modal .modal-content, .ark-modal .modal-content { border: 0; border-radius: 18px; overflow: hidden; }
.ark-theme ~ .modal .modal-header.bg-primary, .ark-theme ~ .modal .modal-header.bg-success {
    background: linear-gradient(135deg, #06301f 0%, #0a5a3c 60%, #0f8a5c 100%) !important;
    color: #fff;
}

@media (max-width: 767px) {
    .ark-hero { padding: 20px; }
}