/* css/style.css */
:root {
    /* FUENTES ACTUALIZADAS A UBUNTU */
    --font-primary: 'Ubuntu', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'Ubuntu Mono', monospace;

    /* Paleta base - algunas partes son sobreescritas por tus cambios directos de color */
    --color-background: #121212;
    --color-surface-1: #1A1A1A; 
    --color-surface-2: #242424; 
    --color-border: #383838;
    --color-border-accent: #4A4A4A;

    --color-text-primary: #F0F0F0;
    --color-text-secondary: #A0A0A0;
    --color-text-placeholder: #707070;

    --color-accent: #f38020; /* Cloudflare Orange - para botones, highlights */
    --color-accent-hover: #e0701b; 
    /* --color-accent-text-on-orange: #FFFFFF;  Fue sobreescrito para #scanButton a #15151b */
    --color-accent-rgb: 243,128,32;

    --color-cloudflare-specific: #f38020; 
    --color-error: #FF6B6B;
    --color-success: #51CF66;


    --shadow-sm: 0 2px 4px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.4);

    --border-radius-sm: 6px;
    --border-radius-md: 10px;
    --transition-speed: 0.25s;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-background);
    color: var(--color-text-primary);
    font-family: var(--font-primary); /* Usará Ubuntu */
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

header.site-header {
    padding: 2.5rem 0;
    background-color: #222225; 
    border-bottom-width: 5px; 
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-style: solid; 
    border-color: #f38020;    
}

.logo-area {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.site-title-link {
    text-decoration: none;
    color: inherit;
    display: inline-block; 
}
.site-title-link h1 { 
    display: inline; 
}

.site-title-link:hover h1 .highlight,
.site-title-link:focus h1 .highlight {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px; 
    text-underline-offset: 3px; 
}


.site-header h1 {
    font-size: 2.5rem;
    font-weight: 700; /* Ubuntu tiene buen peso 700 */
    color: var(--color-text-primary);
    text-align: center;
    margin: 0; 
}

.site-header h1 .highlight {
    color: var(--color-accent);
    font-weight: 700;
}

.site-header .subtitle {
    font-size: 1.05rem;
    color: var(--color-text-secondary);
    text-align: center;
    font-weight: 400; /* Ubuntu Regular */
    max-width: 600px;
    margin: 0.5rem auto 0;
}

.site-main {
    flex-grow: 1;
    padding: 3rem 0;
}

.card {
    border-radius: var(--border-radius-md);
    padding: 2rem;
    margin-bottom: 2.5rem;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
}

section.input-section.card {
    background-color: #222225; 
}

section.results-section.card {
    background-color: #222225; 
}

section.donations-section.card {
    background-color: #222225; 
}


.section-title {
    font-size: 1.75rem;
    font-weight: 500; /* Ubuntu Medium */
    color: var(--color-text-primary);
    margin-bottom: 1.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border-accent);
    display: flex;
    align-items: center;
}
.section-title .icon-left.highlight {
    margin-right: 0.75rem;
    color: var(--color-accent);
}


.input-section {
    display: flex;
    gap: 1rem;
    align-items: center;
}

#inputDomainIp {
    flex-grow: 1;
    padding: 0.9rem 1.25rem;
    background-color: #15151b; 
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    font-family: var(--font-mono); /* Usará Ubuntu Mono */
    outline: none;
    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

#inputDomainIp:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.25);
}

#inputDomainIp::placeholder {
    color: var(--color-text-placeholder);
    font-family: var(--font-primary); /* Placeholder usará Ubuntu */
}

#scanButton {
    padding: 0.9rem 1.75rem;
    background-color: var(--color-accent); 
    color: #15151b; 
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-weight: 500; /* Ubuntu Medium */
    font-size: 1rem;
    font-family: var(--font-primary); /* Usará Ubuntu */
    transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
#scanButton .icon-left {
    margin-right: 0.6rem;
}

#scanButton:hover {
    background-color: var(--color-accent-hover);
    transform: translateY(-2px);
}
#scanButton:active {
    transform: translateY(0);
}

.loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--color-accent);
}

.spinner {
    border: 4px solid rgba(var(--color-accent-rgb), 0.2);
    border-left-color: var(--color-accent);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loader p {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500; /* Ubuntu Medium */
}

#resultsOutputContainer { }

.result-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 1rem;
    table-layout: fixed; 
}

.result-table th, .result-table td {
    text-align: left;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem; /* Ajustar si Ubuntu se ve diferente a Manrope en este tamaño */
    vertical-align: middle;
    word-wrap: break-word; 
    overflow-wrap: break-word; 
}

.result-table th:nth-child(1) { width: 45%; } 
.result-table th:nth-child(2) { width: 30%; } 
.result-table th:nth-child(3) { width: 25%; } 

.result-table.single-column th:nth-child(1) { width: 100%; }


.result-table thead tr th {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700; /* Ubuntu Bold para headers de tabla */
    background-color: #15151b; 
}
.result-table tr:first-child th:first-child { border-top-left-radius: var(--border-radius-sm); }
.result-table tr:first-child th:last-child { border-top-right-radius: var(--border-radius-sm); }

.result-table tr:last-child td { border-bottom: none; }
.result-table tr:last-child td:first-child { border-bottom-left-radius: var(--border-radius-sm); }
.result-table tr:last-child td:last-child { border-bottom-right-radius: var(--border-radius-sm); }


.result-table tbody tr td { 
    color: var(--color-text-primary); 
    background-color: #15151b; 
}
.result-table td:first-child { 
    font-family: var(--font-mono); /* Usará Ubuntu Mono */
    font-weight: 400; /* Ubuntu Mono Regular */
}

.result-table tr:hover td {
    background-color: rgba(var(--color-accent-rgb), 0.1); 
}

.cloudflare-status { 
    display: flex; 
    align-items: center; 
    justify-content: flex-start; 
}

.cloudflare-status .status-text {
    font-size: 0.9rem;
    font-weight: 500; /* Ubuntu Medium */
    line-height: 1.5; 
    display: inline-block; 
    padding-top: 1px; 
    padding-bottom: 1px;
}

.cloudflare-status.proxied .status-text {
    color: var(--color-cloudflare-specific); 
}
.cloudflare-status.direct .status-text {
    color: var(--color-text-secondary);
}

.no-results-message {
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--color-text-secondary);
    font-style: italic; /* Ubuntu Italic se cargó */
    border: 1px dashed var(--color-border-accent);
    border-radius: var(--border-radius-sm);
    background-color: rgba(0,0,0,0.05);
}

.error-message {
    background-color: rgba(255, 107, 107, 0.1);
    color: var(--color-error);
    padding: 1.25rem;
    border-radius: var(--border-radius-sm);
    text-align: center;
    margin-top: 1.5rem;
    border: 1px solid var(--color-error);
    font-weight: 500; /* Ubuntu Medium */
}

/* Donations Section */
.donations-section .donation-intro {
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1rem;
    line-height: 1.7;
}

.donation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.75rem;
}

div.donation-card { 
    background-color: #15151b; 
    padding: 1.75rem;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.donation-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.donation-card-header { display: flex; align-items: center; margin-bottom: 0.75rem; }
.crypto-icon { font-size: 1.5rem; margin-right: 0.75rem; width: 28px; text-align: center; }
.crypto-icon.usdt { color: #26A17B; }
.crypto-icon.btc { color: #F7931A; }

.donation-card h3 { 
    font-size: 1.15rem; 
    font-weight: 500; /* Ubuntu Medium */
    color: var(--color-text-primary); 
    line-height: 1.3; 
}
.network-badge {
    font-size: 0.7rem; padding: 0.2em 0.7em; border-radius: 12px;
    font-weight: 700; /* Ubuntu Bold */
    margin-left: 0.5rem; text-transform: uppercase;
    display: inline-block; vertical-align: middle; border: 1px solid;
}
.network-badge.tron { border-color: #EB0029; color: #EB0029; }
.network-badge.bsc { border-color: #F0B90B; color: #F0B90B; }

.donation-card .small-note { 
    font-size: 0.8rem; 
    color: var(--color-text-placeholder); 
    margin-bottom: 0.75rem; 
    margin-top: -0.5rem; 
    font-weight: 300; /* Ubuntu Light */
}

.address-wrapper {
    display: flex; align-items: center; background-color: var(--color-background);
    border: 1px solid var(--color-border-accent); border-radius: var(--border-radius-sm);
    padding: 0.6rem 0.75rem; margin-bottom: 1rem;
}
.address {
    font-family: var(--font-mono); /* Usará Ubuntu Mono */
    font-size: 0.85rem; 
    color: var(--color-text-secondary);
    word-break: break-all; flex-grow: 1; margin: 0; line-height: 1.4;
}
.copy-button {
    background: none; border: 1px solid var(--color-border-accent); color: var(--color-text-secondary);
    padding: 0.5rem; border-radius: var(--border-radius-sm); cursor: pointer;
    margin-left: 0.75rem; transition: all var(--transition-speed) ease;
    min-width: 40px; text-align: center;
}
.copy-button:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.copy-button i { font-size: 0.9rem; }
.copy-button.copied {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-background);
}

.qr-code-area {
    background-color: var(--color-background); border: 1px solid var(--color-border-accent);
    border-radius: var(--border-radius-sm); padding: 1rem; margin-top: auto;
    display: flex; align-items: center; justify-content: center; min-height: 120px;
}
.qr-code-placeholder {
    background-color: #ffffff; 
    width: 100%; 
    height: 100%; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px; 
    border-radius: var(--border-radius-sm); 
}
.qr-code-placeholder p { 
    color: #333333; 
    font-size: 0.85rem; margin:0;
}
.qr-code-placeholder img {
    max-width: 100%; 
    max-height: 100%; 
    height: auto;
    display: block;
}


footer.site-footer {
    padding: 2.5rem 0; text-align: center; border-top: 1px solid var(--color-border);
    background-color: #222225; 
    margin-top: auto;
}

.site-footer p { 
    color: var(--color-text-secondary); 
    font-size: 0.9rem; 
    margin-bottom: 0.25rem; 
    font-weight: 400; /* Ubuntu Regular */
}
.site-footer p:last-child { margin-bottom: 0; }
.site-footer .footer-note { 
    font-size: 0.8rem; 
    color: var(--color-text-placeholder); 
    font-weight: 300; /* Ubuntu Light */
}


/* Responsiveness */
@media (max-width: 768px) {
    html { font-size: 15px; }
    .container { padding: 0 1rem; }
    .site-header { padding: 2rem 0; }
    .site-header h1 { font-size: 2.2rem; }
    .site-header .subtitle { font-size: 1rem; }
    .site-main { padding: 2rem 0; }
    .card { padding: 1.5rem; margin-bottom: 2rem; }
    .section-title { font-size: 1.5rem; }
    .input-section { flex-direction: column; align-items: stretch; gap: 0.75rem; }
}

@media (max-width: 480px) {
    html { font-size: 14px; }
    .site-header h1 { font-size: 2rem; }
    .result-table { display: block; overflow-x: auto; }
    .result-table th, .result-table td { white-space: nowrap; }
    .donation-grid { grid-template-columns: 1fr; }
}

/* Estilos para la visualización de resultados WHOIS */
.whois-results-pre {
    background-color: var(--color-background); 
    color: var(--color-text-secondary);
    padding: 1.25rem 1.5rem; 
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border-accent);
    white-space: pre-wrap;       
    word-wrap: break-word;       
    overflow-wrap: break-word;   
    font-family: var(--font-mono); /* Usará Ubuntu Mono */
    font-size: 0.85rem;          
    line-height: 1.6;            
    max-height: 600px;           
    overflow-y: auto;            
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); 
}