/* =====================================================================
   CVcraft — style.css
   ===================================================================== */

/* ── Variables globales ─────────────────────────────────────────────── */
:root {
    --color-bg:         #f5f3ef;
    --color-surface:    #ffffff;
    --color-accent:     #1a1a2e;
    --color-accent-2:   #e8632a;
    --color-text:       #1a1a2e;
    --color-text-muted: #7a7a8a;
    --color-border:     #e4e2de;
    --color-bot-bg:     #f0ede8;
    --color-user-bg:    #1a1a2e;
    --color-user-text:  #ffffff;
    --font-display:     'DM Serif Display', serif;
    --font-body:        'DM Sans', sans-serif;
    --radius-card:      20px;
    --radius-bubble:    18px;
    --shadow-card:      0 8px 40px rgba(0,0,0,0.10);
    --transition:       0.2s ease;
}

/* ── Reset y base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Wrapper principal ──────────────────────────────────────────────── */
.app-wrapper {
    width: 100%;
    max-width: 720px;
    padding: 40px 20px 60px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.app-header {
    text-align: center;
}

.header-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.logo-icon {
    font-size: 22px;
    color: var(--color-accent-2);
}

.logo-text {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--color-accent);
    letter-spacing: -0.5px;
}

.logo-text em {
    font-style: italic;
    color: var(--color-accent-2);
}

.header-tagline {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-weight: 300;
}

/* ── Chat Card ──────────────────────────────────────────────────────── */
.chat-card {
    background: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Chat Card Header ───────────────────────────────────────────────── */
.chat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.chat-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.2);
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }
    50%       { box-shadow: 0 0 0 6px rgba(34,197,94,0.08); }
}

.btn-reset-chat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 5px 12px;
    cursor: pointer;
    transition: var(--transition);
}

.btn-reset-chat:hover {
    color: #e53e3e;
    border-color: #e53e3e;
    background: #fff5f5;
}

/* ── Ventana de chat ────────────────────────────────────────────────── */
.chat-window {
    flex: 1;
    height: 460px;
    overflow-y: auto;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scroll-behavior: smooth;
}

/* Scrollbar personalizada */
.chat-window::-webkit-scrollbar { width: 5px; }
.chat-window::-webkit-scrollbar-track { background: transparent; }
.chat-window::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 99px; }

/* ── Mensajes ───────────────────────────────────────────────────────── */
.msg {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    animation: fadeSlideIn 0.25s ease forwards;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Mensaje del bot */
.msg-bot { align-self: flex-start; flex-direction: row; }

.msg-avatar {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-accent-2);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.msg-bubble {
    background: var(--color-bot-bg);
    color: var(--color-text);
    padding: 12px 16px;
    border-radius: var(--radius-bubble);
    border-bottom-left-radius: 4px;
    max-width: 80%;
    font-size: 0.92rem;
    line-height: 1.6;
    white-space: pre-wrap; /* respeta saltos de línea */
}

/* Mensaje del usuario */
.msg-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.msg-user .msg-bubble {
    background: var(--color-user-bg);
    color: var(--color-user-text);
    border-bottom-left-radius: var(--radius-bubble);
    border-bottom-right-radius: 4px;
}

/* ── Indicador de escritura ─────────────────────────────────────────── */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 20px 12px;
}

.typing-avatar {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-accent-2);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.typing-dots {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--color-bot-bg);
    padding: 10px 14px;
    border-radius: 14px;
    border-bottom-left-radius: 4px;
}

.typing-dots span {
    width: 7px;
    height: 7px;
    background: var(--color-text-muted);
    border-radius: 50%;
    animation: blink 1.2s infinite;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes blink {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
    40%           { opacity: 1;   transform: scale(1); }
}

/* ── Área de input ──────────────────────────────────────────────────── */
.chat-input-area {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.chat-textarea {
    flex: 1;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 10px 14px;
    resize: none;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
    line-height: 1.5;
}

.chat-textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(26,26,46,0.08);
}

.chat-textarea::placeholder { color: var(--color-text-muted); }

.btn-send {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), transform var(--transition);
}

.btn-send:hover  { background: var(--color-accent-2); }
.btn-send:active { transform: scale(0.95); }

.btn-send:disabled {
    background: var(--color-border);
    cursor: not-allowed;
    transform: none;
}

/* ── Modal CV ───────────────────────────────────────────────────────── */
.modal-cv-header {
    background: var(--color-accent);
    color: #fff;
    border-bottom: none;
}

.modal-cv-body {
    background: #d1cfc9;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    overflow-y: auto;
}

.modal-cv-footer {
    background: var(--color-accent);
    border-top: none;
    justify-content: center;
    gap: 12px;
}

#cv-container {
    width: 900px;
    max-width: 100%;
    min-height: 1000px;
    background: #fff;
}

.btn-cv-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 500;
    padding: 10px 22px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.btn-cv-download {
    background: #22c55e;
    color: #fff;
}
.btn-cv-download:hover { background: #16a34a; }

.btn-cv-pdf {
    background: var(--color-accent-2);
    color: #fff;
}
.btn-cv-pdf:hover { background: #c4521f; }

/* ── Estilos de impresión ───────────────────────────────────────────── */
@media print {
    body > *:not(#print-area) { display: none !important; }
    #print-area {
        display: block !important;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: #fff;
        z-index: 9999;
    }
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .app-wrapper { padding: 20px 12px 40px; }
    .logo-text   { font-size: 1.6rem; }
    .chat-window { height: 380px; }
    #cv-container { width: 100%; }
}

/* ── Estilos del CV renderizado dentro del modal ────────────────────── */
/* Estas clases se aplican cuando el CV se muestra en #cv-container.    */
/* Los mismos estilos están duplicados en obtenerEstilosCV() de JS       */
/* para el archivo HTML descargable (que no tiene acceso a este CSS).    */

.cv-web-render {
    display: flex;
    width: 900px;
    max-width: 100%;
    min-height: 1000px;
    background: #fff;
}

.cv-web-render .sidebar {
    flex: 1;
    background: #1a1a2e;
    color: #fff;
    padding: 40px 30px;
}

.cv-web-render .sidebar h1 {
    font-family: 'DM Serif Display', serif;
    font-size: 1.6rem;
    margin-bottom: 4px;
    line-height: 1.2;
}

.cv-web-render .sidebar .field-titular {
    color: #e8632a;
    font-size: 0.9rem;
    margin-bottom: 24px;
}

.cv-web-render .sidebar hr {
    border-color: rgba(255,255,255,0.15);
    margin: 16px 0;
}

.cv-web-render .sidebar .contact-item {
    font-size: 0.85rem;
    margin-bottom: 8px;
    opacity: 0.85;
}

.cv-web-render .sidebar h3 {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #e8632a;
    margin: 24px 0 10px;
}

.cv-web-render .main-content {
    flex: 2;
    padding: 40px;
}

.cv-web-render .main-content h2 {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #e8632a;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid #e8632a;
}

.cv-web-render .field-resumen {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 32px;
}

.cv-web-render .section-block { margin-bottom: 32px; }

/* Experiencia */
.exp-item, .form-item { margin-bottom: 20px; }

.exp-header, .form-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.exp-puesto, .form-titulo {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a2e;
}

.exp-periodo, .form-fecha {
    font-size: 0.78rem;
    color: #888;
    white-space: nowrap;
}

.exp-empresa, .form-institucion {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin: 2px 0 6px;
    font-style: italic;
}

.exp-logros {
    padding-left: 18px;
    font-size: 0.85rem;
    color: #444;
    line-height: 1.7;
}

.exp-logros li { margin-bottom: 3px; }

/* Badges de habilidades */
.badge-skill {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 4px 10px;
    border-radius: 20px;
    margin: 3px;
    font-size: 0.78rem;
}

.badge-bland {
    background: rgba(232,99,42,0.15);
    border-color: rgba(232,99,42,0.4);
    color: #e8632a;
}