/*!*************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***! \*************************************************************************************************************************************************************************************************************************************************************/ /* Variables de color para temas */ :root { /* Variables para el tema claro (por defecto) */ --bg-color: #f3f4f6; --bg-card: #ffffff; --text-color: #1f2937; --text-secondary: #6b7280; --border-color: #e5e7eb; --sidebar-bg: #ffffff; --sidebar-hover: #f3f4f6; --header-bg: #ffffff; --active-bg: #e0edff; --active-color: #2563eb; --chart-bg: #f3f4f6; --input-border: #d1d5db; --input-focus: #3b82f6; --btn-primary: #2563eb; --btn-primary-hover: #1d4ed8; --btn-secondary: #6b7280; --btn-secondary-hover: #4b5563; --shadow-color: rgba(0, 0, 0, 0.1); --badge-green-bg: #dcfce7; --badge-green-text: #166534; --badge-blue-bg: #dbeafe; --badge-blue-text: #1e40af; --table-header-bg: #f9fafb; } /* Si el usuario prefiere modo oscuro a nivel de sistema, usar variables oscuras por defecto (estas se pueden sobrescribir poniendo `data-theme="light"`/`data-theme="dark"` en ) */ @media (prefers-color-scheme: dark) { :root { --bg-color: #0b1220; --bg-card: #111827; --text-color: #e6eef8; --text-secondary: #9ca3af; --border-color: #273244; --sidebar-bg: #0f1724; --sidebar-hover: #1b2433; --header-bg: #0f1724; --active-bg: #2563eb; --active-color: #ffffff; --chart-bg: #0f1724; --input-border: #2b3a4a; --input-focus: #60a5fa; --btn-primary: #3b82f6; --btn-primary-hover: #2563eb; --btn-secondary: #6b7280; --btn-secondary-hover: #9ca3af; --shadow-color: rgba(0, 0, 0, 0.5); --badge-green-bg: #064e3b; --badge-green-text: #d1fae5; --badge-blue-bg: #1e3a8a; --badge-blue-text: #dbeafe; --table-header-bg: #111827; } } /* Tema oscuro (soporta `data-theme="dark"` en y clase antigua `dark-theme`) */ html.dark-theme, html[data-theme="dark"], :root[data-theme="dark"], [data-theme="dark"] { --bg-color: #0b1220; --bg-card: #111827; --text-color: #e6eef8; --text-secondary: #9ca3af; --border-color: #273244; --sidebar-bg: #0f1724; --sidebar-hover: #1b2433; --header-bg: #0f1724; --active-bg: #2563eb; --active-color: #ffffff; --chart-bg: #0f1724; --input-border: #2b3a4a; --input-focus: #60a5fa; --btn-primary: #3b82f6; --btn-primary-hover: #2563eb; --btn-secondary: #6b7280; --btn-secondary-hover: #9ca3af; --shadow-color: rgba(0, 0, 0, 0.5); --badge-green-bg: #064e3b; --badge-green-text: #d1fae5; --badge-blue-bg: #1e3a8a; --badge-blue-text: #dbeafe; --table-header-bg: #111827; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s ease, color 0.3s ease; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } /* Console Styles */ .console-container { background-color: #000; color: #00ff00; border-radius: 5px; font-family: 'Courier New', monospace; min-height: 200px; max-height: 300px; overflow-y: auto; margin-bottom: 20px; } .console-header { background-color: #333; color: white; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; border-top-left-radius: 5px; border-top-right-radius: 5px; } .console-output { padding: 10px; min-height: 150px; } .console-output .log-entry { margin: 4px 0; word-break: break-all; } .console-output .log-success { color: #4CAF50; } .console-output .log-error { color: #F44336; } .console-output .log-info { color: #2196F3; } .validation-tracker-container { background-color: #000; color: #00ff00; border-radius: 5px; font-family: 'Courier New', monospace; min-height: 200px; max-height: 300px; overflow-y: auto; margin-bottom: 20px; } .validation-tracker-header { background-color: #333; color: white; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; border-top-left-radius: 5px; border-top-right-radius: 5px; } .validation-tracker-output { padding: 10px; min-height: 150px; } .validation-tracker-output .log-entry { margin: 4px 0; word-break: break-all; } .validation-tracker-output .log-success { color: #4CAF50; } .validation-tracker-output .log-error { color: #F44336; } .validation-tracker-output .log-info { color: #2196F3; } .validation-tracker-output .log-warning { color: #FFC107; } .validation-summary { margin-top: 10px; background-color: #222; padding: 8px; border-radius: 4px; } /* Cards */ .card2{ border-radius: 8px; transition: background-color 0.3s ease, box-shadow 0.3s ease; } .card { background-color: var(--bg-card); border-radius: 8px; box-shadow: 0 1px 3px var(--shadow-color); padding: 24px; transition: background-color 0.3s ease, box-shadow 0.3s ease; margin-bottom: 16px; } .card h3 { font-size: 1.8rem; font-weight: 500; margin-bottom: 16px; } .card p { color: var(--text-secondary); } /* Email Results Container */ .email-results-container { background-color: var(--input-border); border-radius: 12px; min-height: 60px; } /* Table Styles */ .table-container { overflow-x: auto; margin-top: 16px; overflow-y: scroll; height: 400px; } table { width: 100%; border-collapse: collapse; min-width: 600px; } thead { background-color: var(--btn-secondary); transition: background-color 0.3s ease; position: -webkit-sticky; position: sticky; top: 0; } th { text-align: left; padding: 12px 16px; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; color: white; border-bottom: 1px solid var(--border-color); position: -webkit-sticky; position: sticky; top: 0; } td { padding: 16px; border-bottom: 1px solid var(--border-color); font-size: 0.875rem; } .badge { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; } .badge-green { background-color: var(--badge-green-bg); color: var(--badge-green-text); padding: 2px 6px; border-radius: 12px; font-size: 10px; font-weight: 500; text-transform: uppercase; } .badge-blue { background-color: var(--badge-blue-bg); color: var(--badge-blue-text); } /* Campaign Container */ .campaign-container { margin-top: 16px; padding: 16px; background-color: var(--chart-bg); border-radius: 6px; min-height: 120px; } /* Form Styles */ .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-gap: 16px; gap: 16px; margin-top: 16px; } .form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } label { font-size: 0.875rem; font-weight: 500; color: var(--text-color); } .form-control { padding: 10px 12px; border: 1px solid var(--input-border); border-radius: 6px; font-size: 0.875rem; width: 100%; background-color: var(--bg-card); color: var(--text-color); transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; } .form-control:focus { outline: none; border-color: var(--input-focus); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); } textarea.form-control { min-height: 100px; resize: vertical; } /* Button Styles */ .btn { padding: 8px 16px; border-radius: 6px; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s; border: none; } .btn-primary { background-color: var(--btn-primary); color: white; } .btn-primary:hover { background-color: var(--btn-primary-hover); } .btn-secondary { background-color: var(--btn-secondary); color: white; } .btn-secondary:hover { background-color: var(--btn-secondary-hover); } .btn-success { background-color: #28a745; color: white; border: 1px solid #28a745; } .btn-success:hover { background-color: #218838; border-color: #1e7e34; } .button-group { display: flex; flex-wrap: wrap; gap: 8px; } /* Clean Mail Section */ .cleanmail { display: flex; align-items: center; gap: 16px; margin-top: 16px; } #email_available { flex: 1 1; padding: 8px; background-color: var(--chart-bg); border-radius: 4px; min-height: 24px; } #email-results-area { background-color: var(--chart-bg); border-radius: 6px; overflow-y: scroll; height: 330px; max-width: 1200px; } /* Results Container */ .results-container { padding: 16px; background-color: var(--chart-bg); border-radius: 6px; margin-top: 8px; overflow-y: scroll; height: 350px; } /* Upload Container */ .upload-container { display: flex; flex-direction: column; gap: 16px; align-items: center; margin-bottom: 24px; } .divider { display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 0.875rem; } /* Status Message */ .status-message { margin-top: 16px; padding: 8px 12px; border-radius: 4px; background-color: var(--chart-bg); color: var(--text-secondary); min-height: 24px; } /* External Links */ .external-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; } .external-link { display: flex; align-items: center; gap: 8px; color: var(--btn-primary); text-decoration: none; font-size: 0.875rem; transition: color 0.2s; } .external-link:hover { color: var(--btn-primary-hover); text-decoration: underline; } #validation-tracker-output { border-radius: 6px; height: 400px; } .card-body { max-height: 450px; overflow-y: scroll; } /* Utility Classes */ .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } /* Tab Content */ .tab-content { display: none; } .tab-content.active { display: block; } .console-line.info { color: #007bff; } .console-line.success { color: #28a745; } .console-line.error { color: #dc3545; } .console-line.warning { color: #ffc107; } #pic-profile{ width: 200px; height: 200px; border-radius: 50%; background-color: var(--text-secondary); align-items: center; justify-content: center; color: white; font-weight: 500; } /* Responsive */ @media (max-width: 768px) { .sidebar { position: fixed; z-index: 10; transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .form-grid { grid-template-columns: 1fr; } .upload-container { grid-template-columns: 1fr; grid-template-rows: auto auto auto; } } /* Validation Terminal */ .validation-terminal { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .validation-terminal .console-header { background: rgba(0, 0, 0, 0.2); padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .validation-terminal .console-output { padding: 15px; max-height: 300px; overflow-y: auto; font-family: 'Monaco', 'Consolas', 'Courier New', monospace; font-size: 0.9rem; line-height: 1.4; } .validation-terminal .log-entry { margin-bottom: 5px; word-wrap: break-word; } .validation-terminal .timestamp { color: #00ff88; font-weight: bold; } .log-error { color: #ff6b6b; } .log-success { color: #51cf66; } .log-warning { color: #ffd43b; } .log-info { color: #74c0fc; }