From 341395ff32c1879babf9d936ac78f086f28dbc08 Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Thu, 30 Apr 2026 23:30:07 -0500
Subject: [PATCH] uo

---
 resources/views/cloudflare.html | 337 +++++++++++++++++++++++++++++
 resources/views/hostinger.html  | 370 ++++++++++++++++++++++++++++++++
 2 files changed, 707 insertions(+)
 create mode 100644 resources/views/cloudflare.html
 create mode 100644 resources/views/hostinger.html

diff --git a/resources/views/cloudflare.html b/resources/views/cloudflare.html
new file mode 100644
index 0000000..542a89c
--- /dev/null
+++ b/resources/views/cloudflare.html
@@ -0,0 +1,337 @@
+<div x-data="cloudflareApp" class="bg-white rounded-lg shadow">
+
+    <!-- Overlay de carga -->
+    <div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center z-50">
+        <img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
+    </div>
+
+    <div class="container mx-auto p-6 w-full">
+
+        <!-- Header -->
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
+            <div>
+                <h1 class="text-2xl font-bold">Cloudflare API</h1>
+                <p class="text-xs text-slate-500 mt-0.5">Conexión con tu cuenta de Cloudflare para visualizar zonas, DNS, SSL y reglas de firewall.</p>
+            </div>
+            <button @click="configModal = true"
+                class="flex items-center gap-2 text-white text-sm font-medium px-4 py-2 rounded-lg"
+                style="background-color:#8eb02f"
+                onmouseover="this.style.backgroundColor='#6d8c24'"
+                onmouseout="this.style.backgroundColor='#8eb02f'">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/>
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
+                </svg>
+                Configurar Token
+            </button>
+        </div>
+
+        <!-- Alerta sin config -->
+        <div x-show="!hasConfig" class="mb-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg text-sm text-yellow-700">
+            <strong>Sin configuración activa.</strong> Haz clic en "Configurar Token" para ingresar tu API Token de Cloudflare.
+            Puedes generarlo en <strong>dash.cloudflare.com → Perfil → API Tokens</strong>.
+        </div>
+
+        <!-- Info de usuario -->
+        <div x-show="user && user.email" class="mb-5 flex items-center gap-3 p-3 bg-orange-50 border border-orange-200 rounded-lg">
+            <div class="h-9 w-9 rounded-full bg-orange-500 flex items-center justify-center text-white font-bold text-sm" x-text="(user.email||'?').charAt(0).toUpperCase()"></div>
+            <div>
+                <p class="text-sm font-semibold" x-text="user.email"></p>
+                <p class="text-xs text-gray-500" x-text="'ID: ' + (user.id || '—')"></p>
+            </div>
+        </div>
+
+        <!-- Tabs -->
+        <div class="border-b border-gray-200 mb-6">
+            <nav class="-mb-px flex flex-wrap gap-6 text-sm">
+                <button @click="setTab('zones')" :class="activeTab==='zones' ? 'border-b-2 border-[#8eb02f] text-[#6d8c24] font-semibold' : 'text-gray-500 hover:text-gray-700'" class="pb-2 transition-colors">Zonas / Dominios</button>
+                <button @click="setTab('dns')" :class="activeTab==='dns' ? 'border-b-2 border-[#8eb02f] text-[#6d8c24] font-semibold' : 'text-gray-500 hover:text-gray-700'" class="pb-2 transition-colors">DNS Records</button>
+                <button @click="setTab('ssl')" :class="activeTab==='ssl' ? 'border-b-2 border-[#8eb02f] text-[#6d8c24] font-semibold' : 'text-gray-500 hover:text-gray-700'" class="pb-2 transition-colors">SSL / Certificados</button>
+                <button @click="setTab('firewall')" :class="activeTab==='firewall' ? 'border-b-2 border-[#8eb02f] text-[#6d8c24] font-semibold' : 'text-gray-500 hover:text-gray-700'" class="pb-2 transition-colors">Firewall</button>
+            </nav>
+        </div>
+
+        <!-- Selector de zona (para tabs que requieren zone_id) -->
+        <div x-show="['dns','ssl','firewall'].includes(activeTab)" class="flex items-center gap-3 mb-4">
+            <label class="text-xs font-medium text-gray-600 shrink-0">Zona:</label>
+            <select x-model="selectedZoneId" class="border rounded px-3 py-1.5 text-sm">
+                <option value="">— Selecciona una zona —</option>
+                <template x-for="z in zones" :key="z.id">
+                    <option :value="z.id" x-text="z.name"></option>
+                </template>
+            </select>
+            <button @click="loadTab()" :disabled="!selectedZoneId || loading"
+                class="flex items-center gap-1 px-3 py-1.5 rounded border border-gray-300 text-xs hover:bg-gray-50 transition disabled:opacity-40">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" :class="loading && 'animate-spin'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"/>
+                </svg>
+                Cargar
+            </button>
+        </div>
+
+        <!-- Botón cargar para tabs sin zona -->
+        <div x-show="activeTab==='zones'" class="flex items-center gap-3 mb-4">
+            <button @click="loadTab()" :disabled="loading"
+                class="flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-300 text-sm hover:bg-gray-50 transition">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" :class="loading && 'animate-spin'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"/>
+                </svg>
+                <span x-text="loading ? 'Cargando...' : 'Actualizar zonas'"></span>
+            </button>
+            <span class="text-xs text-gray-400" x-show="lastFetch" x-text="'Actualizado: ' + lastFetch"></span>
+        </div>
+
+        <!-- ─── TAB: Zonas ─── -->
+        <div x-show="activeTab==='zones'">
+            <div x-show="zones.length === 0 && !loading" class="text-sm text-gray-400 py-8 text-center">Sin datos. Haz clic en "Actualizar zonas".</div>
+            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+                <template x-for="z in zones" :key="z.id">
+                    <div class="border rounded-xl p-4 bg-white shadow-sm hover:shadow-md transition cursor-pointer"
+                        @click="selectZone(z)">
+                        <div class="flex items-center justify-between mb-2">
+                            <span class="font-semibold text-sm" x-text="z.name"></span>
+                            <span class="px-2 py-0.5 rounded-full text-xs font-medium"
+                                :class="z.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'"
+                                x-text="z.status"></span>
+                        </div>
+                        <div class="space-y-1 text-xs text-gray-500">
+                            <div class="flex justify-between"><span>Plan</span><span x-text="z.plan?.name || z.plan || '—'"></span></div>
+                            <div class="flex justify-between"><span>Tipo</span><span x-text="z.type || '—'"></span></div>
+                            <div class="flex justify-between"><span>ID</span><span class="font-mono truncate max-w-[100px]" x-text="z.id"></span></div>
+                        </div>
+                        <div class="mt-3 flex gap-2">
+                            <button @click.stop="selectedZoneId = z.id; setTab('dns'); loadTab()"
+                                class="flex-1 text-xs py-1.5 rounded border border-[#8eb02f] text-[#6d8c24] hover:bg-green-50 transition">DNS</button>
+                            <button @click.stop="selectedZoneId = z.id; setTab('ssl'); loadTab()"
+                                class="flex-1 text-xs py-1.5 rounded border border-blue-300 text-blue-600 hover:bg-blue-50 transition">SSL</button>
+                            <button @click.stop="selectedZoneId = z.id; setTab('firewall'); loadTab()"
+                                class="flex-1 text-xs py-1.5 rounded border border-red-300 text-red-600 hover:bg-red-50 transition">Firewall</button>
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
+
+        <!-- ─── TAB: DNS ─── -->
+        <div x-show="activeTab==='dns'">
+            <div x-show="dnsRecords.length === 0 && !loading" class="text-sm text-gray-400 py-8 text-center">Selecciona una zona y haz clic en "Cargar".</div>
+            <div class="overflow-x-auto">
+                <table class="table-auto w-full text-xs" x-show="dnsRecords.length > 0">
+                    <thead>
+                        <tr class="text-left border-b font-semibold text-gray-500">
+                            <th class="py-2 px-3">Tipo</th>
+                            <th class="py-2 px-3">Nombre</th>
+                            <th class="py-2 px-3">Contenido</th>
+                            <th class="py-2 px-3">Proxy</th>
+                            <th class="py-2 px-3">TTL</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <template x-for="r in dnsRecords" :key="r.id">
+                            <tr class="border-b hover:bg-gray-50">
+                                <td class="py-2 px-3"><span class="px-1.5 py-0.5 bg-blue-100 text-blue-700 rounded font-mono text-xs" x-text="r.type"></span></td>
+                                <td class="py-2 px-3 font-mono" x-text="r.name"></td>
+                                <td class="py-2 px-3 font-mono truncate max-w-xs" x-text="r.content"></td>
+                                <td class="py-2 px-3">
+                                    <span :class="r.proxied ? 'bg-orange-100 text-orange-700' : 'bg-gray-100 text-gray-500'" class="px-1.5 py-0.5 rounded text-xs">
+                                        <span x-text="r.proxied ? 'Proxied' : 'DNS only'"></span>
+                                    </span>
+                                </td>
+                                <td class="py-2 px-3" x-text="r.ttl === 1 ? 'Auto' : r.ttl"></td>
+                            </tr>
+                        </template>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <!-- ─── TAB: SSL ─── -->
+        <div x-show="activeTab==='ssl'">
+            <div x-show="sslCerts.length === 0 && !loading" class="text-sm text-gray-400 py-8 text-center">Selecciona una zona y haz clic en "Cargar".</div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <template x-for="c in sslCerts" :key="c.id">
+                    <div class="border rounded-xl p-4 bg-white shadow-sm">
+                        <div class="flex items-center justify-between mb-2">
+                            <span class="font-semibold text-sm" x-text="c.type || 'Certificado'"></span>
+                            <span class="px-2 py-0.5 rounded-full text-xs font-medium"
+                                :class="c.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'"
+                                x-text="c.status"></span>
+                        </div>
+                        <div class="space-y-1 text-xs text-gray-500">
+                            <div class="flex justify-between"><span>Hosts cubiertos</span><span class="text-right truncate max-w-[14rem]" x-text="(c.hosts||[]).join(', ')"></span></div>
+                            <div class="flex justify-between"><span>Vigencia</span><span x-text="c.expires_on || '—'"></span></div>
+                            <div class="flex justify-between"><span>ID</span><span class="font-mono" x-text="c.id || '—'"></span></div>
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
+
+        <!-- ─── TAB: Firewall ─── -->
+        <div x-show="activeTab==='firewall'">
+            <div x-show="fwRules.length === 0 && !loading" class="text-sm text-gray-400 py-8 text-center">Selecciona una zona y haz clic en "Cargar".</div>
+            <div class="overflow-x-auto">
+                <table class="table-auto w-full text-xs" x-show="fwRules.length > 0">
+                    <thead>
+                        <tr class="text-left border-b font-semibold text-gray-500">
+                            <th class="py-2 px-3">Modo</th>
+                            <th class="py-2 px-3">IP / Rango</th>
+                            <th class="py-2 px-3">País</th>
+                            <th class="py-2 px-3">Notas</th>
+                            <th class="py-2 px-3">Creado</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <template x-for="r in fwRules" :key="r.id">
+                            <tr class="border-b hover:bg-gray-50">
+                                <td class="py-2 px-3">
+                                    <span class="px-2 py-0.5 rounded text-xs font-medium"
+                                        :class="r.mode === 'block' ? 'bg-red-100 text-red-700' : (r.mode === 'challenge' ? 'bg-yellow-100 text-yellow-700' : 'bg-green-100 text-green-700')"
+                                        x-text="r.mode"></span>
+                                </td>
+                                <td class="py-2 px-3 font-mono" x-text="r.configuration?.value || '—'"></td>
+                                <td class="py-2 px-3" x-text="r.configuration?.country || '—'"></td>
+                                <td class="py-2 px-3 truncate max-w-[12rem]" x-text="r.notes || '—'"></td>
+                                <td class="py-2 px-3 text-gray-500" x-text="r.created_on ? new Date(r.created_on).toLocaleDateString() : '—'"></td>
+                            </tr>
+                        </template>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+    </div><!-- /container -->
+
+    <!-- ─── Modal: Configurar Token ─── -->
+    <div x-show="configModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4"
+        @click.self="configModal=false">
+        <div class="bg-white rounded-xl shadow-xl w-full max-w-md">
+            <div class="flex items-center justify-between px-5 py-4 border-b">
+                <h3 class="font-semibold text-sm">Configurar API Token — Cloudflare</h3>
+                <button @click="configModal=false" class="text-gray-400 hover:text-gray-600">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
+                    </svg>
+                </button>
+            </div>
+            <form @submit.prevent="saveConfig()" class="p-5 space-y-4">
+                <div>
+                    <label class="text-xs font-medium text-gray-600">API Token *</label>
+                    <input x-model="cfgForm.api_token" type="password" required
+                        placeholder="Token de API de Cloudflare (Bearer)"
+                        class="mt-1 w-full border rounded px-3 py-2 text-sm font-mono" />
+                    <p class="mt-1 text-xs text-gray-400">dash.cloudflare.com → Mi perfil → API Tokens → Crear token</p>
+                </div>
+                <div>
+                    <label class="text-xs font-medium text-gray-600">Account ID (opcional)</label>
+                    <input x-model="cfgForm.account_id" class="mt-1 w-full border rounded px-3 py-2 text-sm font-mono"
+                        placeholder="ID de cuenta (visible en el panel)" />
+                </div>
+                <div>
+                    <label class="text-xs font-medium text-gray-600">Nota (opcional)</label>
+                    <input x-model="cfgForm.nota" class="mt-1 w-full border rounded px-3 py-2 text-sm" placeholder="Ej: producción" />
+                </div>
+                <div class="flex justify-end gap-3 pt-2 border-t">
+                    <button type="button" @click="configModal=false" class="px-4 py-2 border rounded text-sm">Cancelar</button>
+                    <button type="submit" :disabled="loading" class="px-5 py-2 text-white text-sm rounded"
+                        style="background-color:#8eb02f">
+                        <span x-text="loading ? 'Guardando…' : 'Guardar'"></span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Toast -->
+    <div x-show="toast.show" x-cloak x-transition
+        class="fixed bottom-4 right-4 z-[100] px-4 py-3 rounded shadow-lg text-sm text-white"
+        :class="toast.type === 'error' ? 'bg-red-500' : 'bg-[#8eb02f]'"
+        x-text="toast.msg"></div>
+</div>
+
+<script>
+document.addEventListener('alpine:init', () => {
+    Alpine.data('cloudflareApp', () => ({
+        loading: false,
+        hasConfig: false,
+        activeTab: 'zones',
+        lastFetch: '',
+        user: {},
+        zones: [],
+        dnsRecords: [],
+        sslCerts: [],
+        fwRules: [],
+        selectedZoneId: '',
+        configModal: false,
+        cfgForm: { id: 0, api_token: '', account_id: '', nota: '' },
+        toast: { show: false, msg: '', type: 'ok' },
+
+        async init() {
+            try {
+                const [uRes, zRes] = await Promise.all([
+                    axios.get('/app/cloudflare/user'),
+                    axios.get('/app/cloudflare/zones'),
+                ]);
+                this.user = uRes.data.data || {};
+                this.zones = zRes.data.data || [];
+                this.hasConfig = true;
+                this.lastFetch = new Date().toLocaleTimeString();
+            } catch (e) {
+                if (e.response?.status === 503) this.hasConfig = false;
+                else this.hasConfig = true;
+            }
+        },
+
+        setTab(tab) {
+            this.activeTab = tab;
+        },
+
+        selectZone(z) {
+            this.selectedZoneId = z.id;
+        },
+
+        async loadTab() {
+            this.loading = true;
+            try {
+                if (this.activeTab === 'zones') {
+                    const res = await axios.get('/app/cloudflare/zones');
+                    this.zones = res.data.data || [];
+                    this.lastFetch = new Date().toLocaleTimeString();
+                } else if (this.activeTab === 'dns' && this.selectedZoneId) {
+                    const res = await axios.get('/app/cloudflare/zones/' + this.selectedZoneId + '/dns');
+                    this.dnsRecords = res.data.data || [];
+                } else if (this.activeTab === 'ssl' && this.selectedZoneId) {
+                    const res = await axios.get('/app/cloudflare/zones/' + this.selectedZoneId + '/ssl');
+                    this.sslCerts = res.data.data || [];
+                } else if (this.activeTab === 'firewall' && this.selectedZoneId) {
+                    const res = await axios.get('/app/cloudflare/zones/' + this.selectedZoneId + '/firewall');
+                    this.fwRules = res.data.data || [];
+                }
+                this.hasConfig = true;
+            } catch (e) {
+                this.showToast(e.response?.data?.error || 'Error al cargar datos', 'error');
+            }
+            this.loading = false;
+        },
+
+        async saveConfig() {
+            this.loading = true;
+            try {
+                await axios.post('/app/cloudflare/config', this.cfgForm);
+                this.showToast('Token guardado correctamente');
+                this.configModal = false;
+                this.hasConfig = true;
+                await this.init();
+            } catch (e) {
+                this.showToast(e.response?.data?.error || 'Error al guardar', 'error');
+            }
+            this.loading = false;
+        },
+
+        showToast(msg, type = 'ok') {
+            this.toast = { show: true, msg, type };
+            setTimeout(() => this.toast.show = false, 3500);
+        }
+    }));
+});
+</script>
diff --git a/resources/views/hostinger.html b/resources/views/hostinger.html
new file mode 100644
index 0000000..b831d47
--- /dev/null
+++ b/resources/views/hostinger.html
@@ -0,0 +1,370 @@
+<div x-data="hostingerApp" class="bg-white rounded-lg shadow">
+
+    <!-- Overlay de carga -->
+    <div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center z-50">
+        <img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
+    </div>
+
+    <div class="container mx-auto p-6 w-full">
+
+        <!-- Header -->
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
+            <div>
+                <h1 class="text-2xl font-bold">Hostinger API</h1>
+                <p class="text-xs text-slate-500 mt-0.5">Conexión con tu cuenta de Hostinger para visualizar VPS, dominios, DNS, hosting y facturación.</p>
+            </div>
+            <button @click="configModal = true"
+                class="flex items-center gap-2 text-white text-sm font-medium px-4 py-2 rounded-lg"
+                style="background-color:#8eb02f"
+                onmouseover="this.style.backgroundColor='#6d8c24'"
+                onmouseout="this.style.backgroundColor='#8eb02f'">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                </svg>
+                Configurar Token
+            </button>
+        </div>
+
+        <!-- Alerta sin config -->
+        <div x-show="!hasConfig" class="mb-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg text-sm text-yellow-700">
+            <strong>Sin configuración activa.</strong> Haz clic en "Configurar Token" para ingresar tu API Token de Hostinger.
+            Puedes generarlo en <strong>hpanel.hostinger.com → Cuenta → API</strong>.
+        </div>
+
+        <!-- Tabs de navegación -->
+        <div class="border-b border-gray-200 mb-6">
+            <nav class="-mb-px flex gap-6 text-sm">
+                <button @click="activeTab='vps'" :class="activeTab==='vps' ? 'border-b-2 border-[#8eb02f] text-[#6d8c24] font-semibold' : 'text-gray-500 hover:text-gray-700'" class="pb-2 transition-colors">VPS / Servidores</button>
+                <button @click="activeTab='domains'" :class="activeTab==='domains' ? 'border-b-2 border-[#8eb02f] text-[#6d8c24] font-semibold' : 'text-gray-500 hover:text-gray-700'" class="pb-2 transition-colors">Dominios</button>
+                <button @click="activeTab='hosting'" :class="activeTab==='hosting' ? 'border-b-2 border-[#8eb02f] text-[#6d8c24] font-semibold' : 'text-gray-500 hover:text-gray-700'" class="pb-2 transition-colors">Hosting</button>
+                <button @click="activeTab='orders'" :class="activeTab==='orders' ? 'border-b-2 border-[#8eb02f] text-[#6d8c24] font-semibold' : 'text-gray-500 hover:text-gray-700'" class="pb-2 transition-colors">Facturación</button>
+            </nav>
+        </div>
+
+        <!-- Botón Cargar datos -->
+        <div class="flex items-center gap-3 mb-4">
+            <button @click="loadTab()" :disabled="loading"
+                class="flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-300 text-sm hover:bg-gray-50 transition">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" :class="loading && 'animate-spin'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+                </svg>
+                <span x-text="loading ? 'Cargando...' : 'Actualizar datos'"></span>
+            </button>
+            <span class="text-xs text-gray-400" x-show="lastFetch" x-text="'Actualizado: ' + lastFetch"></span>
+        </div>
+
+        <!-- ─── TAB: VPS ─── -->
+        <div x-show="activeTab==='vps'">
+            <div x-show="vps.length === 0 && !loading" class="text-sm text-gray-400 py-8 text-center">Sin datos. Haz clic en "Actualizar datos".</div>
+            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+                <template x-for="v in vps" :key="v.id">
+                    <div class="border rounded-xl p-4 bg-white shadow-sm hover:shadow-md transition">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="font-semibold text-sm truncate" x-text="v.hostname"></span>
+                            <span class="px-2 py-0.5 rounded-full text-xs font-medium"
+                                :class="v.state === 'running' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'"
+                                x-text="v.state"></span>
+                        </div>
+                        <div class="space-y-1 text-xs text-gray-500">
+                            <div class="flex justify-between"><span>IPv4</span><span class="font-mono" x-text="v.ipv4 || '—'"></span></div>
+                            <div class="flex justify-between"><span>Plan</span><span x-text="v.plan || '—'"></span></div>
+                            <div class="flex justify-between"><span>Datacenter</span><span x-text="v.data_center || '—'"></span></div>
+                            <div class="flex justify-between"><span>CPU</span><span x-text="(v.cpus || v.cpu || '—') + ' vCPU'"></span></div>
+                            <div class="flex justify-between"><span>RAM</span><span x-text="formatBytes(v.ram) + ' RAM'"></span></div>
+                            <div class="flex justify-between"><span>Disco</span><span x-text="formatBytes(v.disk)"></span></div>
+                        </div>
+                        <button @click="loadDNSForDomain(v.hostname)"
+                            class="mt-3 w-full text-center text-xs py-1.5 rounded border border-[#8eb02f] text-[#6d8c24] hover:bg-green-50 transition">
+                            Ver DNS del hostname
+                        </button>
+                    </div>
+                </template>
+            </div>
+        </div>
+
+        <!-- ─── TAB: Dominios ─── -->
+        <div x-show="activeTab==='domains'">
+            <div x-show="domains.length === 0 && !loading" class="text-sm text-gray-400 py-8 text-center">Sin datos. Haz clic en "Actualizar datos".</div>
+            <div class="overflow-x-auto">
+                <table class="table-auto w-full text-sm">
+                    <thead>
+                        <tr class="text-left border-b text-xs text-gray-500 font-semibold">
+                            <th class="py-2 px-3">Dominio</th>
+                            <th class="py-2 px-3">Estado</th>
+                            <th class="py-2 px-3">Registrado</th>
+                            <th class="py-2 px-3">Vence</th>
+                            <th class="py-2 px-3"></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <template x-for="d in domains" :key="d.domain">
+                            <tr class="border-b hover:bg-gray-50">
+                                <td class="py-2 px-3 font-mono text-xs" x-text="d.domain"></td>
+                                <td class="py-2 px-3">
+                                    <span class="px-2 py-0.5 rounded-full text-xs"
+                                        :class="d.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'"
+                                        x-text="d.status"></span>
+                                </td>
+                                <td class="py-2 px-3 text-xs text-gray-500" x-text="d.registered_at || '—'"></td>
+                                <td class="py-2 px-3 text-xs text-gray-500" x-text="d.expires_at || '—'"></td>
+                                <td class="py-2 px-3">
+                                    <button @click="loadDNSForDomain(d.domain)"
+                                        class="text-xs px-2 py-1 rounded border border-[#8eb02f] text-[#6d8c24] hover:bg-green-50 transition">
+                                        Ver DNS
+                                    </button>
+                                </td>
+                            </tr>
+                        </template>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <!-- ─── TAB: Hosting ─── -->
+        <div x-show="activeTab==='hosting'">
+            <div x-show="hosting.length === 0 && !loading" class="text-sm text-gray-400 py-8 text-center">Sin datos. Haz clic en "Actualizar datos".</div>
+            <div class="overflow-x-auto">
+                <table class="table-auto w-full text-sm">
+                    <thead>
+                        <tr class="text-left border-b text-xs text-gray-500 font-semibold">
+                            <th class="py-2 px-3">Dominio</th>
+                            <th class="py-2 px-3">Plan</th>
+                            <th class="py-2 px-3">Estado</th>
+                            <th class="py-2 px-3">Disco usado</th>
+                            <th class="py-2 px-3">Vence</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <template x-for="h in hosting" :key="h.id">
+                            <tr class="border-b hover:bg-gray-50">
+                                <td class="py-2 px-3 font-mono text-xs" x-text="h.domain || '—'"></td>
+                                <td class="py-2 px-3 text-xs" x-text="h.plan || '—'"></td>
+                                <td class="py-2 px-3">
+                                    <span class="px-2 py-0.5 rounded-full text-xs"
+                                        :class="h.state === 'active' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'"
+                                        x-text="h.state || '—'"></span>
+                                </td>
+                                <td class="py-2 px-3 text-xs" x-text="formatBytes(h.disk_used) + ' / ' + formatBytes(h.disk_limit)"></td>
+                                <td class="py-2 px-3 text-xs text-gray-500" x-text="h.expires_at || '—'"></td>
+                            </tr>
+                        </template>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <!-- ─── TAB: Facturación ─── -->
+        <div x-show="activeTab==='orders'">
+            <div x-show="orders.length === 0 && !loading" class="text-sm text-gray-400 py-8 text-center">Sin datos. Haz clic en "Actualizar datos".</div>
+            <div class="overflow-x-auto">
+                <table class="table-auto w-full text-sm">
+                    <thead>
+                        <tr class="text-left border-b text-xs text-gray-500 font-semibold">
+                            <th class="py-2 px-3">ID</th>
+                            <th class="py-2 px-3">Estado</th>
+                            <th class="py-2 px-3">Total</th>
+                            <th class="py-2 px-3">Moneda</th>
+                            <th class="py-2 px-3">Fecha</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <template x-for="o in orders" :key="o.id">
+                            <tr class="border-b hover:bg-gray-50">
+                                <td class="py-2 px-3 text-xs font-mono" x-text="o.id"></td>
+                                <td class="py-2 px-3">
+                                    <span class="px-2 py-0.5 rounded-full text-xs"
+                                        :class="o.status === 'completed' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'"
+                                        x-text="o.status"></span>
+                                </td>
+                                <td class="py-2 px-3 text-xs font-semibold" x-text="o.total"></td>
+                                <td class="py-2 px-3 text-xs" x-text="o.currency || '—'"></td>
+                                <td class="py-2 px-3 text-xs text-gray-500" x-text="o.created_at || '—'"></td>
+                            </tr>
+                        </template>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+    </div><!-- /container -->
+
+    <!-- ─── Modal: DNS Records ─── -->
+    <div x-show="dnsModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4"
+        @click.self="dnsModal=false">
+        <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[80vh] flex flex-col">
+            <div class="flex items-center justify-between px-5 py-4 border-b">
+                <h3 class="font-semibold text-sm">DNS Records — <span class="font-mono text-[#6d8c24]" x-text="dnsDomain"></span></h3>
+                <button @click="dnsModal=false" class="text-gray-400 hover:text-gray-600">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
+                    </svg>
+                </button>
+            </div>
+            <div class="overflow-y-auto p-5">
+                <div x-show="dnsRecords.length === 0" class="text-sm text-gray-400 text-center py-8">Sin registros DNS encontrados.</div>
+                <table class="table-auto w-full text-xs" x-show="dnsRecords.length > 0">
+                    <thead>
+                        <tr class="text-left border-b font-semibold text-gray-500">
+                            <th class="py-1 px-2">Tipo</th>
+                            <th class="py-1 px-2">Nombre</th>
+                            <th class="py-1 px-2">Contenido</th>
+                            <th class="py-1 px-2">TTL</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <template x-for="r in dnsRecords" :key="r.id">
+                            <tr class="border-b hover:bg-gray-50">
+                                <td class="py-1.5 px-2"><span class="px-1.5 py-0.5 bg-blue-100 text-blue-700 rounded text-xs font-mono" x-text="r.type"></span></td>
+                                <td class="py-1.5 px-2 font-mono" x-text="r.name"></td>
+                                <td class="py-1.5 px-2 font-mono truncate max-w-xs" x-text="r.content"></td>
+                                <td class="py-1.5 px-2" x-text="r.ttl"></td>
+                            </tr>
+                        </template>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <!-- ─── Modal: Configurar Token ─── -->
+    <div x-show="configModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4"
+        @click.self="configModal=false">
+        <div class="bg-white rounded-xl shadow-xl w-full max-w-md">
+            <div class="flex items-center justify-between px-5 py-4 border-b">
+                <h3 class="font-semibold text-sm">Configurar API Token — Hostinger</h3>
+                <button @click="configModal=false" class="text-gray-400 hover:text-gray-600">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
+                    </svg>
+                </button>
+            </div>
+            <form @submit.prevent="saveConfig()" class="p-5 space-y-4">
+                <div>
+                    <label class="text-xs font-medium text-gray-600">API Token *</label>
+                    <input x-model="cfgForm.token" type="password" required
+                        placeholder="Pega aquí tu Bearer token de Hostinger"
+                        class="mt-1 w-full border rounded px-3 py-2 text-sm font-mono" />
+                    <p class="mt-1 text-xs text-gray-400">Genera el token en hpanel.hostinger.com → Cuenta → API</p>
+                </div>
+                <div>
+                    <label class="text-xs font-medium text-gray-600">Nota (opcional)</label>
+                    <input x-model="cfgForm.nota" class="mt-1 w-full border rounded px-3 py-2 text-sm" placeholder="Ej: producción" />
+                </div>
+                <div class="flex justify-end gap-3 pt-2 border-t">
+                    <button type="button" @click="configModal=false" class="px-4 py-2 border rounded text-sm">Cancelar</button>
+                    <button type="submit" class="px-5 py-2 text-white text-sm rounded"
+                        style="background-color:#8eb02f"
+                        :disabled="loading">
+                        <span x-text="loading ? 'Guardando…' : 'Guardar'"></span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Toast -->
+    <div x-show="toast.show" x-cloak x-transition
+        class="fixed bottom-4 right-4 z-[100] px-4 py-3 rounded shadow-lg text-sm text-white"
+        :class="toast.type === 'error' ? 'bg-red-500' : 'bg-[#8eb02f]'"
+        x-text="toast.msg"></div>
+</div>
+
+<script>
+document.addEventListener('alpine:init', () => {
+    Alpine.data('hostingerApp', () => ({
+        loading: false,
+        hasConfig: false,
+        activeTab: 'vps',
+        lastFetch: '',
+        vps: [],
+        domains: [],
+        hosting: [],
+        orders: [],
+        dnsRecords: [],
+        dnsDomain: '',
+        dnsModal: false,
+        configModal: false,
+        cfgForm: { id: 0, token: '', nota: '' },
+        toast: { show: false, msg: '', type: 'ok' },
+
+        async init() {
+            try {
+                const res = await axios.get('/app/hostinger/vps');
+                this.hasConfig = true;
+                this.vps = res.data.data || [];
+                this.lastFetch = new Date().toLocaleTimeString();
+            } catch (e) {
+                if (e.response?.status === 503) this.hasConfig = false;
+                else this.hasConfig = true;
+            }
+        },
+
+        async loadTab() {
+            this.loading = true;
+            try {
+                let res;
+                if (this.activeTab === 'vps') {
+                    res = await axios.get('/app/hostinger/vps');
+                    this.vps = res.data.data || [];
+                } else if (this.activeTab === 'domains') {
+                    res = await axios.get('/app/hostinger/domains');
+                    this.domains = res.data.data || [];
+                } else if (this.activeTab === 'hosting') {
+                    res = await axios.get('/app/hostinger/hosting');
+                    this.hosting = res.data.data || [];
+                } else if (this.activeTab === 'orders') {
+                    res = await axios.get('/app/hostinger/orders');
+                    this.orders = res.data.data || [];
+                }
+                this.lastFetch = new Date().toLocaleTimeString();
+                this.hasConfig = true;
+            } catch (e) {
+                this.showToast(e.response?.data?.error || 'Error al cargar datos', 'error');
+            }
+            this.loading = false;
+        },
+
+        async loadDNSForDomain(domain) {
+            this.loading = true;
+            this.dnsDomain = domain;
+            this.dnsRecords = [];
+            try {
+                const res = await axios.get('/app/hostinger/dns/' + encodeURIComponent(domain));
+                this.dnsRecords = res.data.data || [];
+                this.dnsModal = true;
+            } catch (e) {
+                this.showToast(e.response?.data?.error || 'Error al cargar DNS', 'error');
+            }
+            this.loading = false;
+        },
+
+        async saveConfig() {
+            this.loading = true;
+            try {
+                await axios.post('/app/hostinger/config', this.cfgForm);
+                this.showToast('Token guardado correctamente');
+                this.configModal = false;
+                this.hasConfig = true;
+                await this.loadTab();
+            } catch (e) {
+                this.showToast(e.response?.data?.error || 'Error al guardar', 'error');
+            }
+            this.loading = false;
+        },
+
+        formatBytes(bytes) {
+            if (!bytes || bytes === 0) return '—';
+            const gb = bytes / (1024 ** 3);
+            if (gb >= 1) return gb.toFixed(1) + ' GB';
+            const mb = bytes / (1024 ** 2);
+            return mb.toFixed(0) + ' MB';
+        },
+
+        showToast(msg, type = 'ok') {
+            this.toast = { show: true, msg, type };
+            setTimeout(() => this.toast.show = false, 3500);
+        }
+    }));
+});
+</script>