/*
 * panel-ios.css — PMG-Studio Panel v4.0
 * iOS Light Theme override — reemplaza el modo oscuro completo
 * Incluir DESPUÉS del <style> inline en panel/index.php
 */

/* ═══════════════════════════════════════
   VARIABLES iOS
   ═══════════════════════════════════════ */
:root {
    --p-bg:       #F2F2F7;
    --p-card:     #FFFFFF;
    --p-green:    #00a060;
    --p-blue:     #007AFF;
    --p-purple:   #5856D6;
    --p-orange:   #FF9500;
    --p-red:      #FF3B30;
    --p-text:     #1C1C1E;
    --p-muted:    #8E8E93;
    --p-border:   rgba(0,0,0,0.10);
    --p-shadow:   0 4px 24px rgba(0,0,0,0.06);
}

/* ═══════════════════════════════════════
   BASE
   ═══════════════════════════════════════ */
body {
    background: var(--p-bg) !important;
    color: var(--p-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
}
h1, h2, h3, h4 { color: var(--p-text) !important; }

/* ═══════════════════════════════════════
   GLASS → CARD BLANCA
   ═══════════════════════════════════════ */
.glass {
    background: var(--p-card) !important;
    border: 1px solid var(--p-border) !important;
    box-shadow: var(--p-shadow) !important;
    backdrop-filter: blur(0) !important;
}

/* ═══════════════════════════════════════
   NAV
   ═══════════════════════════════════════ */
.nav {
    background: rgba(242,242,247,0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--p-border) !important;
    color: var(--p-text) !important;
}
.nav a,
.nav span { color: var(--p-text) !important; }
.nav a[href*="pmg"],
.nav a[href*="index"] { color: var(--p-green) !important; }
.nav a[href*="logout"] { color: var(--p-muted) !important; }

/* ═══════════════════════════════════════
   INPUTS — Tema Claro
   ═══════════════════════════════════════ */
input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=date],
input[type=number],
textarea,
select {
    background: var(--p-bg) !important;
    border: 1px solid var(--p-border) !important;
    color: var(--p-text) !important;
    border-radius: 12px !important;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--p-green) !important;
    box-shadow: 0 0 0 3px rgba(0,160,96,0.12) !important;
    background: #fff !important;
}
input::placeholder, textarea::placeholder {
    color: var(--p-muted) !important;
}
select option {
    background: #fff !important;
    color: var(--p-text) !important;
}
.chat-input input {
    background: var(--p-bg) !important;
    border: 1px solid var(--p-border) !important;
    color: var(--p-text) !important;
}
.chat-input input::placeholder { color: var(--p-muted) !important; }

/* ═══════════════════════════════════════
   TABS
   ═══════════════════════════════════════ */
.tab {
    color: var(--p-muted) !important;
    border-color: transparent !important;
}
.tab:hover {
    color: var(--p-text) !important;
    background: rgba(0,0,0,0.04) !important;
}
.tab.active {
    color: var(--p-green) !important;
    background: rgba(0,160,96,0.08) !important;
    border-color: rgba(0,160,96,0.25) !important;
}

/* ═══════════════════════════════════════
   BOTONES
   ═══════════════════════════════════════ */
.btn-neon {
    background: transparent !important;
    border: 1.5px solid var(--p-green) !important;
    color: var(--p-green) !important;
}
.btn-neon:hover {
    background: var(--p-green) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(0,160,96,0.3) !important;
}
.btn-grad {
    background: var(--p-green) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(0,160,96,0.25) !important;
}
.btn-grad:hover {
    background: #009050 !important;
    box-shadow: 0 6px 20px rgba(0,160,96,0.35) !important;
}
.btn-send {
    background: var(--p-green) !important;
    color: #fff !important;
}
.btn-send:hover { background: #009050 !important; }
.btn-back {
    background: rgba(0,0,0,0.05) !important;
    color: var(--p-muted) !important;
    border: 1px solid var(--p-border) !important;
}
.btn-back:hover {
    background: rgba(0,0,0,0.09) !important;
    color: var(--p-text) !important;
}
.btn-blue { background: var(--p-blue) !important; color: #fff !important; }
.btn-red  { background: var(--p-red)  !important; color: #fff !important; }

/* ═══════════════════════════════════════
   BADGES
   ═══════════════════════════════════════ */
.bg-green {
    background: rgba(0,160,96,0.10) !important;
    color: var(--p-green) !important;
    border-color: rgba(0,160,96,0.25) !important;
}
.bg-orange {
    background: rgba(255,149,0,0.10) !important;
    color: var(--p-orange) !important;
    border-color: rgba(255,149,0,0.25) !important;
}
.bg-gray {
    background: rgba(0,0,0,0.06) !important;
    color: var(--p-muted) !important;
    border-color: var(--p-border) !important;
}
.nbadge { background: var(--p-red) !important; }

/* ═══════════════════════════════════════
   CHAT
   ═══════════════════════════════════════ */
.chat-box {
    background: var(--p-bg) !important;
}
.msg-admin {
    background: rgba(0,122,255,0.08) !important;
    border-color: rgba(0,122,255,0.15) !important;
    color: var(--p-text) !important;
}
.msg-client {
    background: rgba(0,160,96,0.08) !important;
    border-color: rgba(0,160,96,0.15) !important;
    color: var(--p-text) !important;
}
.chat-input {
    border-top-color: var(--p-border) !important;
    background: #fff !important;
}

/* ═══════════════════════════════════════
   WIZARD (Cotizar)
   ═══════════════════════════════════════ */
.wiz-step {
    color: var(--p-muted) !important;
    border-bottom-color: var(--p-border) !important;
}
.wiz-step.done {
    color: var(--p-green) !important;
    border-bottom-color: var(--p-green) !important;
}
.wiz-step.active {
    color: var(--p-blue) !important;
    border-bottom-color: var(--p-blue) !important;
}
.label { color: var(--p-muted) !important; }
.field-group { margin-bottom: 14px; }

/* ═══════════════════════════════════════
   ETAPAS DEL PROYECTO
   ═══════════════════════════════════════ */
.stage-item::before {
    background: rgba(0,0,0,0.08) !important;
}

/* ═══════════════════════════════════════
   DOMINIO ROWS
   ═══════════════════════════════════════ */
.dom-row {
    background: var(--p-bg) !important;
    border-color: var(--p-border) !important;
}
.dom-row.avail { border-color: rgba(0,160,96,0.3) !important; }
.dom-row.taken { border-color: rgba(255,59,48,0.2) !important; }

/* ═══════════════════════════════════════
   LANG TOGGLE
   ═══════════════════════════════════════ */
.lang-btn {
    border-color: var(--p-border) !important;
    color: var(--p-muted) !important;
    background: transparent !important;
}
.lang-btn.active {
    border-color: rgba(0,160,96,0.35) !important;
    background: rgba(0,160,96,0.09) !important;
    color: var(--p-green) !important;
}

/* ═══════════════════════════════════════
   BENEFIT ITEMS & PROOF ROWS
   ═══════════════════════════════════════ */
.benefit-item { border-bottom-color: var(--p-border) !important; }
.proof-row {
    background: var(--p-bg) !important;
    border-color: var(--p-border) !important;
}
.pay-row { border-bottom-color: var(--p-border) !important; }

/* ═══════════════════════════════════════
   SCROLLBAR CLARA
   ═══════════════════════════════════════ */
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12) !important;
}
::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.03) !important;
}

/* ═══════════════════════════════════════
   ELIMINAR VERDE NEÓN RESIDUAL
   Captura inline styles con #00ff88 y los
   reemplaza por el verde iOS suave
   ═══════════════════════════════════════ */
[style*="color:#00ff88"],
[style*="color: #00ff88"] {
    color: var(--p-green) !important;
}
[style*="background:#00ff88"],
[style*="background: #00ff88"] {
    background: rgba(0,160,96,0.12) !important;
}
[style*="border-color:#00ff88"],
[style*="border:#00ff88"] {
    border-color: rgba(0,160,96,0.3) !important;
}
[style*="color:#00d4ff"],
[style*="color: #00d4ff"] {
    color: var(--p-blue) !important;
}
[style*="background:#05070a"],
[style*="background: #05070a"],
[style*="background-color:#05070a"] {
    background: var(--p-bg) !important;
    color: var(--p-text) !important;
}
/* Neon box-shadows → quitar */
[style*="box-shadow:0 0"][style*="00ff88"] {
    box-shadow: none !important;
}

/* Cursor invisible → restaurar */
* { cursor: auto; }
a, button, [onclick], label, .btn-neon, .btn-grad, .btn-send, .btn-blue, .btn-red, .tab { cursor: pointer !important; }

/* Texto pequeño que usaba blanco en fondo oscuro */
.glass p, .glass span, .glass div {
    color: inherit;
}

/* Footer año */
footer, footer * { color: var(--p-muted) !important; }

/* ═══════════════════════════════════════
   HOSTING VALUES
   ═══════════════════════════════════════ */
.hosting-val { color: var(--p-blue) !important; }
.hosting-val.empty { color: var(--p-muted) !important; }

/* ═══════════════════════════════════════
   LOGIN PAGE (left panel + right)
   ═══════════════════════════════════════ */
/* Override the dark outer container of the login page */
body > div[style*="background:#05070a"],
body > div[style*="background: #05070a"] {
    background: var(--p-bg) !important;
}
/* Login inner card */
body > div > div:first-child {
    border-right-color: var(--p-border) !important;
}
/* Right benefits panel */
body > div > div:last-child {
    background: linear-gradient(135deg, rgba(0,160,96,0.03), rgba(0,122,255,0.03)) !important;
}
/* Benefit items in login */
.benefit-item div div:first-child { color: var(--p-text) !important; }
.benefit-item div div:last-child  { color: var(--p-muted) !important; }

/* Tab buttons in login */
#tab-login-btn {
    border-color: var(--p-green) !important;
    background: rgba(0,160,96,0.09) !important;
    color: var(--p-green) !important;
}
#tab-quote-btn {
    border-color: var(--p-border) !important;
    background: transparent !important;
    color: var(--p-muted) !important;
}

/* Password strength bar track */
div[style*="background:rgba(255,255,255,0.06)"][style*="height:4px"] {
    background: rgba(0,0,0,0.07) !important;
}

/* Register lang toggle */
#reg-lang-es, #reg-lang-en {
    font-family: 'Inter', sans-serif !important;
}

/* How it works strip */
div[style*="background:rgba(0,255,136,0.03)"] {
    background: rgba(0,160,96,0.04) !important;
    border-color: rgba(0,160,96,0.12) !important;
}

/* Error boxes */
div[style*="background:rgba(239,68,68"] {
    background: rgba(255,59,48,0.07) !important;
    border-color: rgba(255,59,48,0.2) !important;
    color: var(--p-red) !important;
}

/* Warning banner */
div[style*="background:rgba(0,255,136,0.08)"][style*="border-bottom"] {
    background: rgba(0,160,96,0.06) !important;
}
div[style*="color:#fdba74"],
div[style*="color: #fdba74"] { color: var(--p-orange) !important; }

/* ═══════════════════════════════════════
   TEXTOS OSCUROS (override #6b7280 grays)
   ═══════════════════════════════════════ */
[style*="color:#6b7280"], [style*="color: #6b7280"] { color: var(--p-muted) !important; }
[style*="color:#9ca3af"], [style*="color: #9ca3af"] { color: var(--p-muted) !important; }
[style*="color:#4b5563"], [style*="color: #4b5563"] { color: var(--p-muted) !important; }
[style*="color:#374151"], [style*="color: #374151"] { color: #aeaeb2 !important; }

/* Textos blancos que quedarían invisibles en fondo claro */
[style*="color:#fff"]:not(button):not(.btn):not(.pbadge):not(a) { color: var(--p-text) !important; }
[style*="color:white"]:not(button):not(.btn):not(.pbadge):not(a) { color: var(--p-text) !important; }

/* ═══════════════════════════════════════
   TARJETAS OSCURAS (backgrounds oscuros)
   ═══════════════════════════════════════ */
[style*="background:rgba(255,255,255,0.03)"],
[style*="background: rgba(255,255,255,0.03)"] {
    background: var(--p-bg) !important;
}
[style*="background:rgba(255,255,255,.03)"] {
    background: var(--p-bg) !important;
}
[style*="background:#05070a"],
[style*="background: #05070a"] {
    background: var(--p-card) !important;
}

/* ═══════════════════════════════════════
   BORDES OSCUROS
   ═══════════════════════════════════════ */
[style*="border:1px solid rgba(255,255,255,0.08)"],
[style*="border: 1px solid rgba(255,255,255,0.08)"] {
    border-color: var(--p-border) !important;
}
[style*="border-bottom:1px solid rgba(255,255,255"],
[style*="border-top:1px solid rgba(255,255,255"] {
    border-color: var(--p-border) !important;
}

/* ═══════════════════════════════════════
   TEXTOS NEON → VERDE DE MARCA
   ═══════════════════════════════════════ */
[style*="color:#00ff88"]:not(button):not(.btn) { color: var(--p-green) !important; }
[style*="color: #00ff88"]:not(button):not(.btn) { color: var(--p-green) !important; }
[style*="background:rgba(0,255,136"] { background: rgba(0,160,96,0.08) !important; }
[style*="border-color:#00ff88"], [style*="border-color: #00ff88"] { border-color: var(--p-green) !important; }
[style*="color:#00d4ff"]:not(button):not(.btn) { color: var(--p-blue) !important; }
[style*="color: #00d4ff"]:not(button):not(.btn) { color: var(--p-blue) !important; }
[style*="background:rgba(0,212,255"] { background: rgba(0,122,255,0.07) !important; }
[style*="border-color:rgba(0,212,255"] { border-color: rgba(0,122,255,0.2) !important; }
[style*="border-color:rgba(0,255,136"] { border-color: rgba(0,160,96,0.25) !important; }

/* ═══════════════════════════════════════
   STAGE DOTS - progreso claro
   ═══════════════════════════════════════ */
.stage-dot[style*="background:#05070a"] {
    background: var(--p-bg) !important;
}

/* ═══════════════════════════════════════
   SUMMARY CARD (wiz-summary)
   ═══════════════════════════════════════ */
#wiz-summary {
    background: var(--p-bg) !important;
    border-color: var(--p-border) !important;
    color: var(--p-muted) !important;
}
#wiz-summary strong { color: var(--p-text) !important; }

/* ═══════════════════════════════════════
   PORTAL GRID (login 2 col)
   ═══════════════════════════════════════ */
@media(max-width:700px) {
    body > div:first-child { background: var(--p-bg) !important; }
}

/* ═══════════════════════════════════════
   MISC — propuestas, pago, howpay
   ═══════════════════════════════════════ */
/* Proposal rows */
div[style*="background:rgba(255,255,255,.03)"][style*="border-radius:10px"] {
    background: var(--p-bg) !important;
    border-color: var(--p-border) !important;
}
/* payment method items */
div[style*="background:rgba(0,255,136,0.07)"] {
    background: rgba(0,160,96,0.08) !important;
}
/* Info stripe */
div[style*="background:rgba(0,255,136,.04)"] {
    background: rgba(0,160,96,0.05) !important;
    border-color: rgba(0,160,96,0.15) !important;
}
div[style*="color:#6ee7b7"] { color: var(--p-green) !important; }

/* Purple renewal section */
div[style*="background:rgba(124,58,237,.08)"] {
    background: rgba(88,86,214,0.07) !important;
    border-color: rgba(88,86,214,0.2) !important;
}
div[style*="color:#a78bfa"] { color: var(--p-purple) !important; }

/* Pending quote badge */
span[style*="background:rgba(251,146,60"] {
    background: rgba(255,149,0,0.12) !important;
    border-color: rgba(255,149,0,0.3) !important;
    color: var(--p-orange) !important;
}

/* Logo area in admin/client */
.ios-nav-logo, nav a[style*="color:#00ff88"] { color: var(--p-green) !important; }

/* Color picker bubbles (in panel wizard) */
.wiz-color-bubble { border-color: transparent !important; }
.wiz-color-bubble[style*="border-color:#fff"] { border-color: var(--p-text) !important; }