/* STREAMING_CHUNK:Configurando variables de color principales... /
/ =============================================
ACETA Mail — Dark Red & Black Theme
============================================= */

/* ── Google Font ─────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── CSS Custom Properties ───────────────────── /
:root {
/ Backgrounds (Deep Blacks) */
--bg-primary:    #050505;
--bg-secondary:  #0a0a0a;
--bg-card:       #111111;
--bg-card-hover: #1a1515;
--bg-input:      #141414;
--bg-overlay:    rgba(0, 0, 0, 0.85);

/* Accents (Aceta Reds) */
--accent-purple: #e11d48; /* Redefined as Primary Red to not break HTML */
--accent-pink:   #be123c; /* Darker Crimson */
--accent-cyan:   #f43f5e; /* Bright Rose/Red */
--accent-teal:   #9f1239; /* Deep Burgundy */
--accent-red:    #ff0000; /* Pure Red for alerts */
--accent-green:  #10b981; /* Kept for success states */

/* STREAMING_CHUNK:Definiendo degradados y sombras... */
/* Gradients (Red/Black scale) */
--gradient-primary: linear-gradient(135deg, #e11d48, #9f1239);
--gradient-btn:     linear-gradient(135deg, #e11d48, #be123c);
--gradient-btn-hover: linear-gradient(135deg, #be123c, #9f1239);
--gradient-cyan:    linear-gradient(135deg, #f43f5e, #e11d48);

/* Text */
--text-primary:   #ffffff;
--text-secondary: #a3a3a3;
--text-muted:     #737373;
--text-accent:    #f43f5e;

/* Borders (Subtle Reds) */
--border-subtle:  rgba(225, 29, 72, 0.15);
--border-card:    rgba(225, 29, 72, 0.2);
--border-hover:   rgba(225, 29, 72, 0.4);
--border-input:   rgba(115, 115, 115, 0.3);

/* Shadows (Red Glows) */
--shadow-card:    0 4px 24px rgba(0, 0, 0, 0.5);
--shadow-glow:    0 0 20px rgba(225, 29, 72, 0.2);
--shadow-btn:     0 4px 15px rgba(225, 29, 72, 0.4);

/* Sizing */
--radius-sm:  8px;
--radius-md:  12px;
--radius-lg:  16px;
--radius-xl:  20px;
--radius-pill: 9999px;

/* Transitions */
--transition-fast: 0.15s ease;
--transition-med:  0.25s ease;
--transition-slow: 0.4s ease;


}

/* STREAMING_CHUNK:Aplicando estilos base y tipografía... /
/ ── Reset & Base ────────────────────────────── */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

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

body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
min-height: 100vh;
overflow-x: hidden;
line-height: 1.6;
}

/* ── Animated Background ─────────────────────── */
body::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(ellipse at 20% 50%, rgba(225, 29, 72, 0.08) 0%, transparent 60%),
radial-gradient(ellipse at 80% 20%, rgba(190, 18, 60, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at 50% 80%, rgba(244, 63, 94, 0.05) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}

/* STREAMING_CHUNK:Diseñando el encabezado superior... /
/ ── Header ──────────────────────────────────── */
.header {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 16px 24px;
background: rgba(5, 5, 5, 0.85);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-subtle);
}

.logo {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--bg-card);
padding: 8px 20px;
border-radius: var(--radius-pill);
border: 1px solid var(--border-card);
box-shadow: var(--shadow-glow);
font-weight: 700;
font-size: 1.1rem;
letter-spacing: 1px;
color: var(--text-primary);
text-transform: uppercase;
}

.logo-icon {
width: 28px;
height: 28px;
background: var(--gradient-primary);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}

/* STREAMING_CHUNK:Maquetando el contenedor principal... /
/ ── Main Container ──────────────────────────── */
.main-container {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
padding: 32px 24px;
display: grid;
grid-template-columns: 1fr 380px;
gap: 24px;
min-height: calc(100vh - 65px);
align-content: start;
}

/* ── Glass Card ──────────────────────────────── */
.card {
background: rgba(17, 17, 17, 0.7);
backdrop-filter: blur(12px);
border: 1px solid var(--border-card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
}

/* STREAMING_CHUNK:Dando estilo a los inputs y botones... /
/ ── Right Panel: Search Card ────────────────── */
.search-panel {
display: flex;
flex-direction: column;
gap: 20px;
}

.search-card {
padding: 32px 28px;
text-align: center;
}

.search-card .brand-icon {
width: 72px;
height: 72px;
margin: 0 auto 16px;
background: var(--bg-secondary);
border: 2px solid var(--border-card);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
box-shadow: 0 0 30px rgba(225, 29, 72, 0.25);
transition: box-shadow var(--transition-med);
}

.search-card .brand-icon:hover {
box-shadow: 0 0 40px rgba(225, 29, 72, 0.4);
}

.search-card h2 {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 20px;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.input-group {
position: relative;
margin-bottom: 16px;
}

.input-group input {
width: 100%;
padding: 14px 48px 14px 18px;
background: var(--bg-input);
border: 1px solid var(--border-input);
border-radius: var(--radius-pill);
color: var(--text-primary);
font-family: inherit;
font-size: 0.9rem;
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input-group input::placeholder {
color: var(--text-muted);
}

.input-group input:focus {
border-color: var(--accent-purple);
box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.15);
}

/* STREAMING_CHUNK:Animando los botones de acción... */
.btn-copy {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
font-size: 16px;
}

.btn-copy:hover {
background: rgba(225, 29, 72, 0.15);
color: var(--accent-purple);
}

.btn-copy.copied {
color: var(--accent-green);
}

.btn-primary {
width: 100%;
padding: 14px;
border: none;
border-radius: var(--radius-pill);
background: var(--gradient-btn);
color: white;
font-family: inherit;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
transition: all var(--transition-fast);
box-shadow: var(--shadow-btn);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}

.btn-primary:hover {
background: var(--gradient-btn-hover);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(225, 29, 72, 0.5);
}

.btn-primary:active {
transform: translateY(0);
}

.btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}

/* STREAMING_CHUNK:Construyendo la lista de correos (Bandeja)... /
/ ── Left Panel: Inbox ───────────────────────── */
.inbox-panel {
display: flex;
flex-direction: column;
}

.inbox-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 24px;
border-bottom: 1px solid var(--border-subtle);
}

.inbox-header h2 {
font-size: 1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}

.inbox-header h2 .icon {
color: var(--accent-cyan);
}

.mail-count {
font-size: 0.8rem;
font-weight: 500;
color: var(--text-muted);
background: var(--bg-input);
padding: 4px 12px;
border-radius: var(--radius-pill);
}

/* ── Mail List ───────────────────────────────── */
.mail-list {
flex: 1;
overflow-y: auto;
max-height: calc(100vh - 200px);
}

.mail-list::-webkit-scrollbar {
width: 6px;
}

.mail-list::-webkit-scrollbar-track {
background: transparent;
}

.mail-list::-webkit-scrollbar-thumb {
background: var(--accent-cyan);
border-radius: 3px;
}

/* STREAMING_CHUNK:Personalizando el hover en los correos... */
.mail-item {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 24px;
border-bottom: 1px solid var(--border-subtle);
cursor: pointer;
transition: all var(--transition-fast);
position: relative;
}

.mail-item:hover {
background: var(--bg-card-hover);
}

.mail-item.active {
background: rgba(225, 29, 72, 0.1);
border-left: 3px solid var(--accent-purple);
}

.mail-item.unread {
background: rgba(244, 63, 94, 0.04);
}

.mail-item.unread .mail-subject {
font-weight: 600;
color: var(--text-primary);
}

.mail-item.unread::before {
content: '';
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: var(--accent-cyan);
border-radius: 50%;
box-shadow: 0 0 8px var(--accent-cyan);
}

.mail-avatar {
width: 42px;
height: 42px;
border-radius: var(--radius-md);
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
color: white;
flex-shrink: 0;
text-transform: uppercase;
}

.mail-content {
flex: 1;
min-width: 0;
}

.mail-sender {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.mail-subject {
font-size: 0.82rem;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 400;
}

.mail-time {
font-size: 0.72rem;
color: var(--text-muted);
white-space: nowrap;
flex-shrink: 0;
align-self: flex-start;
margin-top: 2px;
}

/* STREAMING_CHUNK:Diseñando la vista de lectura de correos... /
/ ── Load More ───────────────────────────────── */
.load-more-container {
padding: 16px 24px;
text-align: center;
}

.btn-load-more {
padding: 10px 24px;
border: 1px solid var(--border-card);
border-radius: var(--radius-pill);
background: transparent;
color: var(--text-accent);
font-family: inherit;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}

.btn-load-more:hover {
background: rgba(225, 29, 72, 0.1);
border-color: var(--border-hover);
}

/* ── Empty State ─────────────────────────────── */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 64px 32px;
text-align: center;
color: var(--text-muted);
}

.empty-state .empty-icon {
font-size: 56px;
margin-bottom: 16px;
opacity: 0.5;
}

.empty-state h3 {
font-size: 1.05rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 8px;
}

.empty-state p {
font-size: 0.85rem;
max-width: 280px;
line-height: 1.5;
}

/* ── Message Detail Panel ────────────────────── */
.message-detail {
padding: 28px;
display: none;
animation: fadeSlideUp 0.3s ease;
}

.message-detail.visible {
display: block;
}

.detail-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-subtle);
}

.detail-from {
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 4px;
}

.detail-from strong {
color: var(--text-primary);
}

.detail-subject {
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 6px;
}

.detail-date {
font-size: 0.78rem;
color: var(--text-muted);
}

.btn-close-detail {
width: 36px;
height: 36px;
border: 1px solid var(--border-input);
border-radius: 50%;
background: var(--bg-input);
color: var(--text-secondary);
cursor: pointer;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
flex-shrink: 0;
}

.btn-close-detail:hover {
border-color: var(--border-hover);
color: var(--text-primary);
background: var(--bg-card-hover);
}

.detail-body {
font-size: 0.9rem;
line-height: 1.7;
color: var(--text-secondary);
word-break: break-word;
overflow-wrap: break-word;
overflow: auto;
}

.detail-body h2 {
font-size: 1.1rem;
color: var(--text-primary);
margin-bottom: 8px;
}

.detail-body p {
margin-bottom: 10px;
}

.detail-body a {
color: var(--accent-cyan);
text-decoration: none;
}

.detail-body a:hover {
text-decoration: underline;
}

.detail-body ul, .detail-body ol {
margin-left: 20px;
margin-bottom: 10px;
}

/* STREAMING_CHUNK:Finalizando con notificaciones, modales y adaptabilidad móvil... /
/ ── Loading Spinner ─────────────────────────── */
.spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 0.6s linear infinite;
}

/* ── Toast Notification ──────────────────────── */
.toast {
position: fixed;
bottom: 32px;
right: 32px;
padding: 14px 24px;
border-radius: var(--radius-md);
background: var(--bg-card);
border: 1px solid var(--border-card);
color: var(--text-primary);
font-size: 0.85rem;
font-weight: 500;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
transform: translateY(100px);
opacity: 0;
transition: all var(--transition-med);
z-index: 1000;
display: flex;
align-items: center;
gap: 10px;
}

.toast.show {
transform: translateY(0);
opacity: 1;
}

.toast.success {
border-color: rgba(34, 197, 94, 0.4);
}

.toast.error {
border-color: rgba(239, 68, 68, 0.4);
}

/* ── Modal Overlay ───────────────────────────── */
.modal-overlay {
position: fixed;
inset: 0;
background: var(--bg-overlay);
backdrop-filter: blur(8px);
z-index: 500;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-med);
}

.modal-overlay.active {
opacity: 1;
pointer-events: auto;
}

.modal {
width: 90%;
max-width: 640px;
max-height: 80vh;
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--radius-xl);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
overflow-y: auto;
transform: scale(0.9) translateY(20px);
transition: transform var(--transition-med);
padding: 32px;
}

.modal-overlay.active .modal {
transform: scale(1) translateY(0);
}

.modal::-webkit-scrollbar {
width: 4px;
}

.modal::-webkit-scrollbar-thumb {
background: var(--accent-purple);
border-radius: 2px;
}

/* ── Polling Indicator ───────────────────────── */
.polling-indicator {
position: fixed;
top: 80px;
right: 24px;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.72rem;
color: var(--text-muted);
opacity: 0;
transition: opacity var(--transition-fast);
z-index: 90;
}

.polling-indicator.active {
opacity: 1;
}

.polling-dot {
width: 8px;
height: 8px;
background: var(--accent-green);
border-radius: 50%;
box-shadow: 0 0 8px var(--accent-green);
animation: pulse 2s infinite;
}

/* ── Keyframes ───────────────────────────────── */
@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(12px); }
to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes pulse {
0%, 100% { opacity: 1; }
50%      { opacity: 0.4; }
}

@keyframes slideIn {
from { opacity: 0; transform: translateX(-12px); }
to   { opacity: 1; transform: translateX(0); }
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 900px) {
.main-container {
grid-template-columns: 1fr;
padding: 16px;
}

.search-panel {
    order: -1;
}

.mail-list {
    max-height: 50vh;
}


}

@media (max-width: 480px) {
.header {
padding: 12px 16px;
}

.logo {
    font-size: 0.95rem;
    padding: 6px 16px;
}

.search-card {
    padding: 24px 20px;
}

.mail-item {
    padding: 12px 16px;
}

.mail-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
}

.modal {
    width: 95%;
    padding: 24px;
}


}