/* ==========================================================================
Creador de CV Dinámico
styles.css - Hoja de Estilos Principal (Dashboard + Plantillas de CV + Impresión)
Desarrollado completamente con CSS Nesting nativo
========================================================================== */
/* ==========================================================================
Sistema de Design Tokens — VectorCV
Edita los PRIMITIVOS para cambiar la paleta completa.
Los tokens semánticos consumen los primitivos, el CSS usa los semánticos.
========================================================================== */
/* --- 1. PRIMITIVOS DE COLOR -------------------------------------------- */
:root {
/* Marca principal (Navy) */
--clr-navy-900: #1e293b;
--clr-navy-800: #253347;
--clr-navy-700: #2c3e57;
/* Marca primaria (Sapphire Blue) */
--clr-blue-600: #2563eb;
--clr-blue-700: #1d4ed8;
--clr-blue-100: rgba(37, 99, 235, 0.08);
--clr-blue-050: rgba(37, 99, 235, 0.04);
/* Marca acento (Electric Cyan) */
--clr-cyan-500: #06b6d4;
--clr-cyan-600: #0891b2;
--clr-cyan-100: rgba(6, 182, 212, 0.12);
--clr-cyan-050: rgba(6, 182, 212, 0.05);
/* Neutros */
--clr-white: #ffffff;
--clr-gray-50: #fafafa;
--clr-gray-100: #f1f5f9;
--clr-gray-200: #e2e8f0;
--clr-gray-300: #cbd5e1;
--clr-gray-400: #94a3b8;
--clr-gray-500: #64748b;
--clr-gray-600: #475569;
--clr-gray-700: #334155;
--clr-gray-800: #1e293b;
--clr-gray-900: #0f172a;
/* Semánticos de estado */
--clr-danger: #ef4444;
--clr-danger-hover: #dc2626;
--clr-success: #10b981;
--clr-warning: #f59e0b;
/* --- 2. TOKENS SEMÁNTICOS (consumen primitivos) ------------------------- */
/* Superficies */
--surface-canvas: var(--clr-gray-50);
--surface-preview: var(--clr-gray-100);
--surface-float: rgba(255, 255, 255, 0.85);
--surface-card: var(--clr-white);
--surface-input: var(--clr-gray-100);
--surface-input-focus: var(--clr-white);
--surface-overlay: rgba(15, 23, 42, 0.6);
/* Texto */
--text-primary: var(--clr-gray-800);
--text-secondary: var(--clr-gray-700);
--text-muted: var(--clr-gray-500);
--text-placeholder: var(--clr-gray-400);
--text-on-brand: var(--clr-white);
/* Bordes */
--border-subtle: var(--clr-gray-200);
--border-default: var(--clr-gray-300);
--border-emphasis: var(--clr-blue-600);
/* Marca — primario */
--brand-primary: var(--clr-blue-600);
--brand-primary-hover: var(--clr-blue-700);
--brand-primary-glow: var(--clr-blue-100);
--brand-primary-light: var(--clr-blue-050);
/* Marca — acento */
--brand-accent: var(--clr-cyan-500);
--brand-accent-hover: var(--clr-cyan-600);
--brand-accent-glow: var(--clr-cyan-100);
--brand-accent-light: var(--clr-cyan-050);
/* Acción (botones dashed, add, secondary) */
--action-dashed-border: var(--clr-blue-600);
--action-dashed-bg: rgba(37, 99, 235, 0.05);
--action-dashed-hover-border: var(--clr-blue-600);
--action-dashed-hover-bg: rgba(37, 99, 235, 0.1);
--action-dashed-active-bg: rgba(37, 99, 235, 0.15);
/* Estado */
--state-danger: var(--clr-danger);
--state-danger-hover: var(--clr-danger-hover);
--state-success: var(--clr-success);
/* --- 3. SOMBRAS --------------------------------------------------------- */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
--shadow-float: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 20px 40px -15px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.02);
--shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 14px -4px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.02);
/* Borde de luz (skeuomorphic rim highlight) */
--rim-top-left: rgba(255, 255, 255, 0.95);
--rim-bottom-right: rgba(148, 163, 184, 0.35);
/* --- 4. ESPACIADO (Unidades relativas / responsive) ---------------------- */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
/* --- 5. RADIO (Bordes redondeados más ligeros para estética premium) ----- */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 10px;
--radius-xl: 12px;
/* --- 6. TRANSICIONES ---------------------------------------------------- */
--transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
/* --- ALIASES DE COMPATIBILIDAD (para no romper reglas existentes) ------- */
--db-bg: var(--surface-canvas);
--db-card-bg: var(--surface-card);
--db-border: var(--border-subtle);
--db-border-hover: var(--border-default);
--db-primary: var(--brand-primary);
--db-primary-hover: var(--brand-primary-hover);
--db-primary-glow: var(--brand-primary-glow);
--db-primary-light: var(--brand-primary-light);
--db-accent: #3b82f6;
/* Electric Blue/Light Sapphire */
--db-accent-hover: #2563eb;
/* Primary Sapphire */
--db-accent-glow: rgba(37, 99, 235, 0.12);
/* Sapphire Glow */
--db-accent-light: rgba(37, 99, 235, 0.05);
/* Sapphire Light */
--db-text: var(--text-primary);
--db-text-secondary: var(--text-secondary);
--db-text-muted: var(--text-muted);
--db-input-bg: var(--surface-input);
--db-input-focus-bg: var(--surface-input-focus);
--db-btn-danger: var(--state-danger);
--db-btn-danger-hover: var(--state-danger-hover);
--db-btn-success: var(--state-success);
--db-shadow-sm: var(--shadow-sm);
--db-shadow: var(--shadow-md);
--db-shadow-lg: var(--shadow-lg);
--db-radius-sm: var(--radius-sm);
--db-radius-md: var(--radius-md);
--db-radius-lg: var(--radius-lg);
--db-radius-xl: var(--radius-xl);
}
/* Reset y Base del Dashboard */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--db-bg);
background-image:
radial-gradient(at 0% 0%, var(--brand-primary-light) 0px, transparent 45%),
radial-gradient(at 100% 100%, rgba(37, 99, 235, 0.03) 0px, transparent 45%);
color: var(--db-text);
overflow: hidden;
height: 100vh;
}
/* Scrollbars Personalizados para el Panel Lateral */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.12);
border-radius: 4px;
&:hover {
background: var(--db-accent);
}
}
/* Contenedor Principal (Dashboard) */
#app-container {
display: flex;
flex-direction: column;
height: 100vh;
/* Barra Superior */
header.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-2) var(--space-6);
background: var(--surface-float);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--db-border);
border-radius: var(--db-radius-xl);
/* Pill dock shape */
box-shadow: var(--shadow-md);
margin: var(--space-4) var(--space-6) var(--space-2) var(--space-6);
/* Float on top */
z-index: 10;
.brand {
display: flex;
align-items: center;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
.logo-icon-pill {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: transparent;
border-radius: var(--db-radius-md);
overflow: hidden;
padding: 0.2rem;
img.logo-svg {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
}
h1 {
font-size: 19px;
font-weight: bolder;
color: #151618;
user-select: none;
-webkit-user-select: none;
.brand-vector,
.brand-cv {
color: inherit !important;
}
}
.brand-tagline {
font-size: 11px;
font-weight: 400;
color: var(--db-text-muted, #94a3b8);
letter-spacing: 0.3px;
margin-left: 6px;
opacity: 0.75;
vertical-align: middle;
display: none;
@media (min-width: 768px) {
display: inline-block;
}
}
}
.controls-top {
display: flex;
align-items: center;
gap: 15px;
/* Selector de Plantilla Visual */
.template-selector-container {
position: relative;
.dropdown-chevron-svg {
width: 1.5rem;
height: 1.5rem;
fill: currentColor;
transition: transform 0.2s ease;
margin: -0.5rem;
}
&.open {
.dropdown-chevron-svg {
transform: rotate(180deg);
}
}
/* Menú Desplegable de Plantillas */
.template-dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
background: var(--clr-gray-900);
backdrop-filter: blur(16px);
border: 1px solid var(--db-border);
border-radius: 8px;
padding: 16px;
z-index: 100;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
flex-direction: row;
gap: 16px;
animation: dropdownFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
&.active {
display: flex;
}
/* Opción de Plantilla Individual */
.template-option {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 8px;
border-radius: 6px;
border: 1px solid transparent;
transition: all 0.2s ease;
&:hover {
background: var(--db-bg);
border-color: var(--db-border-hover);
.template-name {
color: var(--db-text);
}
.template-mini-preview {
transform: translateY(-2px);
box-shadow: var(--db-shadow);
}
}
&.active {
background: var(--db-accent-glow);
border-color: var(--db-accent);
.template-name {
color: var(--db-accent);
font-weight: 600;
}
.template-mini-preview {
border-color: var(--db-accent);
box-shadow: 0 0 10px var(--db-accent-glow);
}
}
}
.template-name {
font-size: 12px;
font-weight: 500;
color: var(--db-text-muted);
transition: color 0.2s;
text-align: center;
}
/* Previsualizaciones en miniatura A4 */
.template-mini-preview {
width: 110px;
height: 155px;
background: white;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
transition: all 0.2s ease;
user-select: none;
.mini-avatar {
background: #e2e8f0;
border: 1px solid white;
}
.mini-line {
height: 3px;
background: #e2e8f0;
border-radius: 1px;
width: 100%;
&.mini-title {
height: 4px;
}
}
/* Miniatura para Moderno (Charcoal) */
&.moderno {
background: #ffffff;
.mini-header {
height: 32px;
background: #2C2D30;
width: 100%;
}
.mini-body {
display: flex;
flex-direction: row;
flex-grow: 1;
height: calc(100% - 32px);
}
.mini-content-col {
width: 65px;
padding: 8px 6px;
display: flex;
flex-direction: column;
gap: 4px;
}
.mini-sidebar-col {
width: 45px;
background: #2C2D30;
padding: 8px 4px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.mini-avatar {
width: 20px;
height: 20px;
border-radius: 50%;
background: #F3EFE6;
margin-bottom: 2px;
}
.mini-line.mini-title {
width: 80%;
background: #C9A227;
}
.mini-sidebar-col .mini-line {
background: rgba(255, 255, 255, 0.2);
}
}
/* Miniatura para Profesional (Navy/Gold) */
&.profesional {
background: #ffffff;
display: flex;
flex-direction: row;
.mini-stripe {
width: 6px;
height: 100%;
background: #0b1726;
flex-shrink: 0;
}
.mini-right-side {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.mini-header {
height: 28px;
background: #1b2a4a;
padding: 4px 6px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.mini-avatar {
width: 16px;
height: 16px;
border-radius: 2px;
}
.mini-body {
display: flex;
flex-direction: row;
flex-grow: 1;
height: calc(100% - 28px);
}
.mini-content-col {
width: 62px;
padding: 8px 6px;
display: flex;
flex-direction: column;
gap: 4px;
}
.mini-sidebar-col {
width: 42px;
background: #f4f6f8;
border-left: 1px solid #e1e4e8;
padding: 8px 4px;
display: flex;
flex-direction: column;
gap: 4px;
}
.mini-line.mini-title {
width: 70%;
background: #e8a838;
}
}
/* Miniatura para Minimalista (B&W) */
&.minimalista {
background: #ffffff;
padding: 8px;
.mini-header {
height: 22px;
border-bottom: 1.5px solid #111111;
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 3px;
margin-bottom: 6px;
}
.mini-avatar {
width: 14px;
height: 14px;
border-radius: 50%;
}
.mini-body {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.mini-main-full {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
}
.mini-line.mini-title {
background: #111111;
width: 50%;
}
}
}
}
}
@keyframes dropdownFadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.select-wrapper {
position: relative;
select {
appearance: none;
background-color: var(--db-input-bg);
border: 1px solid var(--db-border);
color: var(--db-text);
padding: 8px 36px 8px 14px;
font-size: 13.5px;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s;
outline: none;
&:hover {
border-color: var(--db-border-hover);
}
&:focus {
border-color: var(--db-accent);
box-shadow: 0 0 0 2px var(--db-accent-glow);
}
}
&::after {
content: '\25BC';
font-size: 8px;
color: var(--db-text-muted);
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--surface-card);
border: 1px solid var(--db-border);
color: var(--db-text);
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
border-radius: var(--db-radius-sm);
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
&:hover {
background: var(--db-bg);
border-color: var(--db-border-hover);
transform: translateY(-1px);
}
&.btn-primary {
background: linear-gradient(135deg, var(--db-primary) 0%, var(--db-accent) 100%);
color: var(--text-on-brand);
border: none;
font-weight: 600;
box-shadow: none;
&:hover {
background: linear-gradient(135deg, var(--db-primary-hover) 0%, var(--db-accent-hover) 100%);
box-shadow: none;
transform: translateY(-1px);
}
}
}
#btn-reset {
border-color: rgba(239, 68, 68, 0.3);
color: var(--state-danger);
&:hover {
background: rgba(239, 68, 68, 0.08);
border-color: var(--state-danger-hover);
color: var(--state-danger-hover);
transform: translateY(-1px);
}
}
#btn-grammar-check {
border-color: var(--db-border);
color: var(--db-text-muted);
&:hover {
background: var(--db-primary-light);
border-color: var(--db-primary);
color: var(--db-primary);
transform: translateY(-1px);
}
}
}
}
/* Workspace del Editor + Previsualización */
.workspace {
display: grid;
grid-template-columns: calc(52px + var(--editor-width, 468px)) 1fr;
flex-grow: 1;
overflow: hidden;
transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
&:has(nav.editor-tabs.expanded) {
grid-template-columns: calc(240px + var(--editor-width, 468px)) 1fr;
}
/* Panel Izquierdo: Formularios de Entrada */
aside.editor-panel {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-right: none;
display: flex;
flex-direction: row;
overflow: hidden;
position: relative;
.editor-body {
display: flex;
flex-direction: column;
flex-grow: 1;
margin: 8px 12px 16px 88px;
/* Margins for floating editor container */
height: calc(100% - 24px);
border-radius: var(--db-radius-xl);
background: var(--surface-float);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--db-border);
box-shadow: var(--shadow-float);
overflow: hidden;
transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
will-change: margin-left;
}
/* Riel de navegación lateral con diseño de dock flotante circular */
nav.editor-tabs {
display: flex;
flex-direction: column;
width: 52px;
position: absolute;
left: 24px;
top: 8px;
bottom: 16px;
height: calc(100% - 24px);
border: 1px solid var(--db-border);
border-radius: var(--db-radius-xl);
background: var(--surface-float);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: var(--shadow-float);
overflow: hidden;
z-index: 100;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
/* Área de pestañas: fila central, ocupa todo el espacio disponible y hace scroll interno */
.nav-tabs-scroll-area {
flex-grow: 1;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
display: flex;
flex-direction: column;
min-height: 0;
&::-webkit-scrollbar {
display: none;
}
}
/* Estado expandido (toggle activado) */
&.expanded {
width: 240px;
box-shadow: var(--shadow-md);
.tab-label {
opacity: 1;
max-width: 180px;
transform: translateX(0);
transition: opacity 0.2s ease 0.1s, transform 0.2s ease 0.1s, max-width 0.2s ease 0.1s;
}
.nav-toggle-btn svg {
transform: rotate(90deg);
}
}
/* Clase de etiqueta general para el sidebar */
.tab-label {
opacity: 0;
max-width: 0;
overflow: hidden;
transform: translateX(-8px);
transition: opacity 0.15s ease, transform 0.15s ease, max-width 0.15s ease;
}
/* Botón toggle hamburguesa */
.nav-toggle-btn {
background: transparent;
border: none;
color: var(--db-text-muted);
width: calc(100% - 16px);
height: 36px;
margin: 12px 8px 8px 8px;
border-radius: var(--db-radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 8px;
gap: 12px;
white-space: nowrap;
flex-shrink: 0;
transition: all 0.2s ease;
svg {
width: 20px;
height: 20px;
fill: currentColor;
opacity: 0.7;
flex-shrink: 0;
transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
&:hover {
color: var(--db-accent);
background: var(--db-accent-glow);
svg {
opacity: 1;
}
}
}
.tab-btn,
.settings-btn {
background: transparent;
border: none;
color: var(--db-text-muted);
width: calc(100% - 16px);
height: 36px;
margin: 4px 8px;
border-radius: var(--db-radius-sm);
cursor: pointer;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
transition: all 0.2s ease;
position: relative;
padding: 8px;
svg,
i {
width: 20px;
height: 20px;
fill: currentColor;
opacity: 0.75;
flex-shrink: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
}
&:hover {
color: var(--db-text);
background: var(--db-bg);
svg,
i {
opacity: 1;
transform: scale(1.05);
}
}
&.active {
color: var(--db-accent);
background: var(--db-accent-glow);
font-weight: 600;
text-shadow: none;
svg,
i {
opacity: 1;
fill: var(--db-accent);
color: var(--db-accent);
}
}
}
}
/* Ajuste del margin del body cuando el nav está expandido */
&:has(nav.editor-tabs.expanded) .editor-body {
margin-left: 276px;
}
.editor-footer {
padding: 12px 24px;
border-top: 1px solid var(--db-border);
text-align: center;
font-size: 12px;
background: var(--db-bg);
user-select: none;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.github-footer-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--db-text);
font-weight: 500;
text-decoration: none;
transition: color 0.2s ease, opacity 0.2s ease;
opacity: 0.85;
&:hover {
opacity: 1;
color: var(--db-accent);
}
.github-icon {
width: 16px;
height: 16px;
fill: currentColor;
}
}
}
.editor-resize-handle {
position: absolute;
top: 0;
right: 0;
width: 6px;
height: 100%;
cursor: ew-resize;
z-index: 20;
background: linear-gradient(180deg, var(--db-accent) 2px, transparent 2px);
background-size: 6px 6px;
opacity: 0.6;
transition: opacity 0.2s ease;
&:hover {
opacity: 1;
}
}
/* Formularios de Edición */
.editor-content {
flex-grow: 1;
overflow-y: auto;
padding: 24px;
display: flex;
flex-direction: column;
gap: 24px;
/* Estilo Semántico de fieldset y legend en Formularios */
fieldset {
position: relative;
border: 1px solid rgba(148, 163, 184, 0.25);
border-top-color: var(--rim-top-left);
border-left-color: var(--rim-top-left);
border-bottom-color: var(--rim-bottom-right);
border-right-color: var(--rim-bottom-right);
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: var(--db-radius-lg);
padding: 20px;
margin: 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 18px;
box-shadow: var(--shadow-card);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
&:focus-within {
border-color: var(--db-accent);
background: rgba(255, 255, 255, 0.7);
box-shadow: var(--db-shadow);
}
}
legend {
font-size: 11px;
font-weight: 700;
color: var(--db-accent);
padding: 0 10px;
text-transform: uppercase;
letter-spacing: 0.8px;
text-shadow: none;
&[contenteditable="true"] {
cursor: text;
border-radius: 4px;
border: 1px dashed transparent;
transition: all 0.2s ease;
outline: none;
padding: 2px 8px 2px 24px;
/* 24px left padding for icon */
display: inline-flex;
align-items: center;
gap: 6px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 6px center;
background-size: 13px 13px;
&:hover {
border-color: var(--db-accent);
background-color: var(--db-accent-glow);
background-image: url("data:image/svg+xml;utf8,");
}
&:focus {
border-color: var(--db-accent);
background-color: var(--db-accent-glow);
box-shadow: 0 0 0 2px var(--db-accent-glow);
background-image: url("data:image/svg+xml;utf8,");
}
}
}
.btn-toggle-visibility {
position: absolute;
top: -22px;
right: 20px;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--db-card-bg);
border: 1px solid var(--db-border);
color: var(--db-accent);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0;
box-shadow: var(--db-shadow-sm);
&:hover {
background: var(--db-accent);
color: var(--text-on-brand);
border-color: var(--db-accent);
transform: scale(1.1);
box-shadow: 0 0 12px var(--db-accent-glow);
}
&.is-hidden {
color: var(--db-text-muted);
border-color: var(--db-border);
opacity: 0.7;
&:hover {
background: var(--db-text-muted);
color: var(--db-card-bg);
border-color: var(--db-text-muted);
opacity: 1;
}
}
svg {
width: 18px;
height: 18px;
fill: currentColor;
display: block;
}
.icon-eye-hidden {
display: none;
}
&.is-hidden {
.icon-eye-visible {
display: none;
}
.icon-eye-hidden {
display: block;
}
}
}
.form-section {
display: none;
flex-direction: column;
gap: 16px;
&.active {
display: flex;
animation: fadeInSection 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
h3 {
font-size: 15px;
font-weight: 600;
color: var(--db-text);
border-bottom: 1px solid var(--db-border);
padding-bottom: 8px;
display: flex;
justify-content: space-between;
align-items: center;
}
}
/* Formulario Elementos Generales */
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
label {
font-size: 11px;
font-weight: 600;
color: var(--db-text-muted);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-left: 2px;
}
input[type="text"],
input[type="email"],
input[type="url"],
textarea,
select {
background-color: var(--surface-input);
border: 1px solid var(--border-subtle);
color: var(--db-text);
padding: 10px 14px;
font-size: 13.5px;
border-radius: var(--db-radius-md);
outline: none;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
font-family: inherit;
&:hover {
background-color: var(--surface-card);
border-color: var(--border-default);
}
&:focus {
border-color: var(--brand-primary);
background-color: var(--surface-input-focus);
box-shadow: 0 0 0 3px var(--brand-primary-glow);
}
&::placeholder {
color: var(--text-placeholder);
opacity: 0.7;
}
}
textarea {
resize: vertical;
min-height: 120px;
}
input[type="date"],
input[type="month"] {
background-color: var(--surface-input);
border: 1px solid var(--border-subtle);
color: var(--db-text);
padding: 10px 12px;
font-size: 13px;
border-radius: var(--db-radius-md);
outline: none;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
font-family: inherit;
position: relative;
cursor: pointer;
min-width: 0;
&::-webkit-calendar-picker-indicator {
background: transparent;
color: transparent;
cursor: pointer;
height: auto;
width: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
}
/* Icono de calendario dorado personalizado */
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
padding-right: 36px;
&:focus {
border-color: var(--db-accent);
box-shadow: 0 0 0 2px var(--db-accent-glow);
}
&:disabled {
opacity: 0.4;
cursor: not-allowed;
background-image: url('data:image/svg+xml;utf8,');
}
}
.date-picker-helper-row {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 8px;
width: 100%;
.date-inputs-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 12px;
width: 100%;
}
.date-field {
display: flex;
flex-direction: column;
gap: 4px;
span {
font-size: 10px;
font-weight: 600;
color: var(--db-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-left: 4px;
}
input[type="date"],
input[type="month"] {
width: 100%;
}
}
.presente-checkbox-label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
align-self: flex-start;
margin-left: 4px;
padding: 4px 0;
input[type="checkbox"] {
accent-color: var(--db-accent);
width: 16px;
height: 16px;
cursor: pointer;
}
span {
font-size: 10px;
font-weight: 600;
color: var(--db-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
&:hover span {
color: var(--db-text);
}
}
}
.input-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
/* Estilos para el autocompletado de direcciones y la geolocalización */
.address-container-rel {
position: relative;
width: 100%;
input#address-input {
padding-right: 76px;
width: 100%;
}
.address-actions {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 6px;
z-index: 5;
}
.address-btn {
background: transparent;
border: none;
border-radius: 6px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
svg {
width: 20px;
height: 20px;
fill: var(--db-text-muted);
opacity: 0.75;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), fill 0.2s ease, opacity 0.2s ease;
}
&:hover svg {
transform: scale(1.15);
fill: var(--db-accent);
opacity: 1;
}
&:disabled {
opacity: 0.4;
cursor: not-allowed;
&:hover svg {
transform: none;
fill: var(--db-text-muted);
opacity: 0.4;
}
}
}
.address-suggestions-list {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--db-card-bg);
border: 1px solid var(--db-border);
border-radius: 6px;
margin: 4px 0 0 0;
padding: 0;
list-style: none;
max-height: 200px;
overflow-y: auto;
z-index: 50;
box-shadow: var(--db-shadow);
li {
padding: 10px 12px;
font-size: 13px;
color: var(--db-text);
cursor: pointer;
transition: background 0.2s;
border-bottom: 1px solid var(--db-border);
&:last-child {
border-bottom: none;
}
&:hover {
background: var(--db-accent-light);
color: var(--db-accent);
}
}
}
}
/* Estilos de los campos divididos del número de teléfono */
.phone-input-row {
display: grid;
grid-template-columns: 110px 1fr;
gap: 8px;
width: 100%;
select#phone-prefix-select {
width: 100%;
cursor: pointer;
background-color: var(--db-input-bg);
border: 1px solid var(--db-border);
color: var(--db-text);
padding: 10px 8px;
font-size: 13.5px;
border-radius: 6px;
outline: none;
transition: all 0.2s;
&:hover {
border-color: var(--db-border-hover);
}
&:focus {
border-color: var(--db-accent);
box-shadow: 0 0 0 2px var(--db-accent-glow);
}
}
input#phone-number-input {
width: 100%;
background-color: var(--db-input-bg);
border: 1px solid var(--db-border);
color: var(--db-text);
padding: 10px 12px;
font-size: 13.5px;
border-radius: 6px;
outline: none;
transition: all 0.2s;
&:focus {
border-color: var(--db-accent);
box-shadow: 0 0 0 2px var(--db-accent-glow);
}
}
}
/* Foto de Perfil: Cargador Interactivo y Controles de Forma */
.photo-layout-row {
display: flex;
align-items: center;
gap: 20px;
margin-top: 6px;
.avatar-uploader-wrapper {
position: relative;
flex-shrink: 0;
.avatar-preview {
width: 76px;
height: 76px;
border-radius: 50%;
background: var(--db-input-bg);
border: 2px dashed var(--db-border);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: var(--db-shadow-sm);
cursor: pointer;
position: relative;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
.placeholder-svg {
width: 36px;
height: 36px;
fill: var(--text-placeholder);
transition: fill 0.2s ease;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
/* Capa superpuesta que aparece al pasar el cursor indicando acción de carga */
.avatar-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--surface-overlay);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
color: var(--text-on-brand);
transition: opacity 0.25s ease-in-out;
.overlay-icon {
width: 22px;
height: 22px;
}
}
/* Animación e iluminación hover al interactuar con el previsualizador */
&:hover {
border-color: var(--db-accent);
background: var(--db-accent-glow);
box-shadow: var(--db-shadow);
.placeholder-svg {
fill: var(--db-accent);
}
img {
transform: scale(1.05);
}
.avatar-overlay {
opacity: 1;
}
}
/* Aplicación de formas geométricas dinámicas en la vista previa */
&.shape-circle {
border-radius: 50%;
img {
border-radius: 50%;
}
}
&.shape-rounded {
border-radius: 12px;
img {
border-radius: 12px;
}
}
&.shape-square {
border-radius: 0;
img {
border-radius: 0;
}
}
}
}
/* Controles adyacentes de formas con tamaño aumentado para ergonomía visual */
.avatar-shape-toggles-side {
display: flex;
gap: 8px;
.shape-toggle-btn {
background: var(--db-bg);
border: 1px solid var(--db-border);
color: var(--db-text-muted);
width: 32px;
height: 32px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0;
svg {
width: 15px;
height: 15px;
}
&:hover {
color: var(--db-text);
border-color: var(--db-border-hover);
background: var(--db-border);
}
&.active {
color: var(--db-accent);
border-color: var(--db-accent);
background: var(--db-accent-glow);
box-shadow: 0 0 8px var(--db-accent-glow);
}
}
}
}
}
/* Estilos para canales de contacto dinámicos/adicionales */
#dynamic-contacts-container {
display: flex;
flex-direction: column;
gap: 18px;
&:empty {
display: none;
}
}
.dynamic-contact-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
label {
margin-bottom: 0;
}
}
.add-contact-group {
border-top: 1px solid var(--db-border);
padding-top: 15px;
}
.add-contact-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
width: 100%;
select {
width: 100%;
background-color: var(--surface-input);
border: 1px solid var(--border-subtle);
color: var(--db-text);
padding: 10px 8px;
font-size: 13.5px;
border-radius: var(--db-radius-md);
outline: none;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
&:hover {
background-color: var(--surface-card);
border-color: var(--border-default);
}
&:focus {
border-color: var(--brand-primary);
background-color: var(--surface-input-focus);
box-shadow: 0 0 0 2px var(--brand-primary-glow);
}
option:disabled {
color: var(--db-text-muted);
}
}
.btn-add-contact-item {
background: var(--db-accent-light);
color: var(--db-accent);
border: 1px dashed var(--action-dashed-border);
font-weight: 600;
padding: 10px 16px;
border-radius: var(--db-radius-md);
cursor: pointer;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: none !important;
svg {
width: 16px;
height: 16px;
fill: var(--db-accent);
transition: fill 0.25s ease;
}
&:hover {
background: var(--db-accent-glow);
border-color: var(--db-accent);
transform: translateY(-1px);
box-shadow: none !important;
}
&:active {
transform: translateY(0);
background: var(--action-dashed-hover-bg);
}
}
}
/* Controles Dinámicos de Lista (Agregar / Quitar) */
.list-items-container {
display: flex;
flex-direction: column;
gap: 16px;
}
.repeater-card {
background: rgba(255, 255, 255, 0.65);
border: 1px solid rgba(148, 163, 184, 0.25);
border-top-color: var(--rim-top-left);
border-left-color: var(--rim-top-left);
border-bottom-color: var(--rim-bottom-right);
border-right-color: var(--rim-bottom-right);
border-radius: var(--db-radius-lg);
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: var(--shadow-card);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
&.dragging {
opacity: 0.4;
border: 1px dashed var(--brand-primary) !important;
}
&.drag-over-above {
border-top: 2px solid var(--brand-primary) !important;
}
&.drag-over-below {
border-bottom: 2px solid var(--brand-primary) !important;
}
.drag-handle {
width: 24px;
height: 24px;
color: var(--db-text-muted);
flex-shrink: 0;
cursor: grab;
transition: color 0.2s ease, transform 0.2s ease;
margin-right: 8px;
&:hover {
color: var(--db-accent);
transform: scale(1.15);
cursor: grabbing;
}
}
&.collapsed {
gap: 0;
padding-top: 10px;
padding-bottom: 10px;
}
&.collapsed .repeater-body {
max-height: 0;
opacity: 0;
overflow: hidden;
margin-top: 0;
pointer-events: none;
transition: max-height 0.35s ease-in-out, opacity 0.15s ease-in-out, margin-top 0.35s ease-in-out;
}
.repeater-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
cursor: pointer;
user-select: none;
padding: 2px 4px;
border-radius: 4px;
transition: background 0.2s;
&:hover {
background: var(--db-bg);
}
.repeater-header-left {
display: flex;
align-items: center;
gap: 8px;
flex-grow: 1;
min-width: 0;
.collapse-arrow {
width: 18px;
height: 18px;
fill: var(--db-text-muted);
transition: transform 0.2s ease-in-out;
flex-shrink: 0;
}
}
.repeater-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
color: var(--db-accent);
letter-spacing: 0.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
flex-grow: 1;
}
}
.repeater-body {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 8px;
max-height: 1000px;
opacity: 1;
overflow: visible;
transition: max-height 0.35s ease-in-out, opacity 0.35s ease-in-out, margin-top 0.35s ease-in-out;
}
.grid-2-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
width: 100%;
@media (max-width: 600px) {
grid-template-columns: 1fr;
}
}
.optional-link-toggle-wrapper {
margin: 6px 0;
.toggle-link-label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
font-size: 10px;
font-weight: 600;
color: var(--db-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
input[type="checkbox"] {
accent-color: var(--db-accent);
width: 15px;
height: 15px;
cursor: pointer;
}
&:hover {
color: var(--db-text);
}
}
}
.btn-remove {
background: transparent;
border: none;
border-radius: 6px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
flex-shrink: 0;
svg {
width: 18px;
height: 18px;
color: var(--db-text-muted);
fill: var(--db-text-muted);
opacity: 0.85;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease, fill 0.2s ease, opacity 0.2s ease;
}
&:hover svg {
transform: scale(1.15);
color: var(--state-danger);
fill: var(--state-danger);
opacity: 1;
}
}
/* Fieldset anidado para la URL y texto de botón de estudios */
.nested-fieldset {
background: var(--surface-input);
border: 1px solid var(--border-subtle);
border-radius: var(--db-radius-md);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
legend {
font-size: 10px;
font-weight: 600;
color: var(--db-text-muted);
padding: 0 6px;
}
.form-group {
width: 100%;
display: flex;
flex-direction: column;
gap: 4px;
input {
width: 100%;
}
}
}
/* Animación y colapso suave para fieldsets de enlaces opcionales */
.exp-link-fieldset,
.edu-link-fieldset {
max-height: 0;
opacity: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
border-color: transparent;
box-shadow: none;
overflow: hidden;
pointer-events: none;
transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.2s ease,
padding 0.25s cubic-bezier(0.4, 0, 0.2, 1),
margin 0.25s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.25s ease;
&.visible {
max-height: 180px;
opacity: 1;
padding-top: 12px;
padding-bottom: 12px;
margin-top: 12px;
border-color: var(--border-subtle);
pointer-events: auto;
}
}
}
.btn-add {
background: var(--db-accent-light);
border: 1px dashed var(--action-dashed-border);
color: var(--db-accent);
font-weight: 600;
padding: 10px;
border-radius: var(--db-radius-md);
cursor: pointer;
font-size: 12.5px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
&:hover {
background: var(--db-accent-glow);
border-color: var(--db-accent);
transform: translateY(-1px);
}
&:active {
transform: translateY(0);
background: var(--action-dashed-hover-bg);
}
}
/* Estilo para los intereses (Lista de checkboxes e iconos) */
.interests-grid-editor {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
.interest-checkbox-card {
display: flex;
align-items: center;
gap: 8px;
background: var(--surface-input);
border: 1px solid var(--db-border);
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
svg {
width: 18px;
height: 18px;
fill: var(--db-text-muted);
}
span {
font-size: 12.5px;
}
input[type="checkbox"] {
margin-left: auto;
accent-color: var(--db-accent);
cursor: pointer;
}
&:hover {
border-color: var(--db-accent);
background: var(--db-accent-glow);
}
&.selected {
background: var(--db-accent-glow);
border-color: var(--db-accent);
svg {
fill: var(--db-accent);
}
}
}
}
/* Estilos de los controles de personalización de colores */
.color-picker-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
.color-picker-item {
display: flex;
align-items: center;
gap: 10px;
background: var(--db-input-bg);
border: 1px solid var(--db-border);
padding: 6px 12px;
border-radius: 6px;
input[type="color"] {
border: none;
background: none;
width: 32px;
height: 32px;
cursor: pointer;
}
span {
font-size: 12px;
color: var(--db-text-muted);
}
}
}
.font-selector-container {
display: flex;
flex-direction: column;
gap: 8px;
.font-selector-label {
font-size: 12px;
color: var(--db-text-muted);
font-weight: 500;
}
.select-wrapper {
select {
width: 100%;
}
}
}
}
}
/* Contenedor del Previsualizador con Zoom Fijo */
.preview-panel-outer {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
flex-grow: 1;
/* Panel Derecho: Previsualizador del CV A4 a escala */
main#preview-panel {
background-color: var(--surface-preview);
/* Fondo gris claro suave para contraste con hojas blancas */
overflow: auto;
display: flex;
justify-content: center;
align-items: center;
/* Centrado vertical cuando cabe */
padding: 40px;
position: relative;
flex-grow: 1;
margin: 8px 24px 16px 12px;
/* Margins for floating preview container */
height: calc(100% - 24px);
border-radius: var(--db-radius-xl);
border: 1px solid rgba(148, 163, 184, 0.22);
border-top-color: var(--rim-top-left);
border-left-color: var(--rim-top-left);
border-bottom-color: var(--rim-bottom-right);
border-right-color: var(--rim-bottom-right);
box-shadow: var(--shadow-float);
/* Wrapper intermedio que se redimensiona por JS según la escala */
.cv-preview-wrapper {
position: relative;
margin: auto;
/* Centrado del contenedor en el flujo de caja flexible (Flexbox) */
flex-shrink: 0;
box-shadow: var(--shadow-lg);
border: 1px solid rgba(15, 23, 42, 0.08);
/* Borde sutil para delimitar hojas blancas */
transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Contenedor absoluto que aloja el canvas A4 y se escala en su esquina superior izquierda */
.cv-preview-container {
position: absolute;
top: 0;
left: 0;
width: 794px;
/* A4 en Pixeles (96 DPI) */
height: 1123px;
/* A4 en Pixeles (96 DPI) */
transform-origin: top left;
background-color: transparent;
.cv-page {
width: 100% !important;
height: 100% !important;
}
}
}
/* Barra de Control de Zoom Flotante (Píldora Vertical) */
.zoom-controls-floating.vertical-pill {
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
width: 44px;
padding: 12px 6px;
gap: 10px;
background: var(--db-card-bg);
backdrop-filter: blur(8px);
border: 1px solid var(--db-border);
border-radius: var(--db-radius-lg);
box-shadow: var(--db-shadow);
z-index: 20;
.btn-zoom-btn,
.btn-zoom-action {
background: var(--db-bg);
border: 1px solid var(--db-border);
color: var(--db-text);
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.15s;
padding: 0;
svg {
width: 14px;
height: 14px;
fill: currentColor;
display: inline-block !important;
}
&:hover {
background: var(--db-border);
border-color: var(--db-accent);
color: var(--db-accent);
}
&.active {
color: var(--db-accent);
background: var(--db-accent-light);
border-color: var(--db-accent);
}
}
.zoom-divider {
width: calc(100% - 8px);
height: 1px;
background-color: var(--db-border);
margin: 4px 0;
display: block;
}
#zoom-val-label {
font-size: 11px;
font-weight: 700;
color: var(--db-text);
width: 100%;
text-align: center;
user-select: none;
padding: 2px 0;
}
#zoom-range {
appearance: slider-vertical;
-webkit-appearance: slider-vertical;
writing-mode: vertical-lr;
direction: rtl;
width: 20px;
height: 100px;
cursor: pointer;
accent-color: var(--db-accent);
margin: 6px 0;
outline: none;
}
}
}
}
}
/* Diálogos modales (Importar / Exportar JSON) */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: var(--surface-overlay);
backdrop-filter: blur(8px);
z-index: 2000;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
&.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
.modal-card {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.modal-card {
background: var(--db-card-bg);
border: 1px solid var(--db-border);
width: 90%;
max-width: 500px;
border-radius: 12px;
overflow: hidden;
box-shadow: var(--db-shadow-lg);
opacity: 0;
transform: scale(0.95) translateY(15px);
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
&.modal-confirm-card {
max-width: 400px;
border-color: rgba(239, 68, 68, 0.3);
/* estado danger — correcto */
}
.modal-header {
padding: 16px 20px;
border-bottom: 1px solid var(--db-border);
display: flex;
justify-content: space-between;
align-items: center;
h4 {
font-size: 15px;
font-weight: 600;
}
.modal-close {
background: transparent;
border: none;
color: var(--db-text-muted);
font-size: 18px;
cursor: pointer;
&:hover {
color: var(--db-text);
}
}
}
.modal-body {
padding: 20px;
display: flex;
flex-direction: column;
gap: 15px;
p {
font-size: 13px;
color: var(--db-text-muted);
line-height: 1.5;
}
.file-import-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 5px;
#btn-trigger-file-import {
background: var(--db-bg);
border: 1px solid var(--db-border);
color: var(--db-text);
padding: 8px 14px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
&:hover {
background: var(--db-border);
border-color: var(--db-accent);
}
}
#selected-file-name {
font-size: 12.5px;
color: var(--db-text-muted);
font-style: italic;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 240px;
}
#import-json-file {
display: none;
}
}
textarea {
background: var(--db-input-bg);
border: 1px solid var(--db-border);
color: var(--db-text);
padding: 10px;
font-size: 12px;
font-family: monospace;
border-radius: 6px;
width: 100%;
min-height: 200px;
resize: none;
&:focus {
border-color: var(--db-accent);
outline: none;
}
}
}
.modal-footer {
padding: 15px 20px;
border-top: 1px solid var(--db-border);
background: var(--db-bg);
display: flex;
justify-content: flex-end;
gap: 10px;
.btn {
background: var(--db-card-bg);
border: 1px solid var(--db-border);
color: var(--db-text);
padding: 8px 16px;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
&.btn-success {
background: var(--db-accent);
color: var(--text-on-brand);
border-color: var(--db-accent);
font-weight: 600;
}
&.btn-danger {
background: var(--state-danger);
color: var(--text-on-brand);
border-color: var(--state-danger);
font-weight: 600;
&:hover {
background: var(--state-danger-hover);
border-color: var(--state-danger-hover);
}
}
}
}
}
}
@keyframes modalShow {
from {
opacity: 0;
transform: scale(0.95) translateY(10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* CONFIGURACIÓN DE IMPRESIÓN */
@page {
size: A4;
margin: 0;
}
@media print {
/* 1. Reset root elements to fill page viewport exactly without fixed width downscaling */
html,
body {
background: #ffffff !important;
color: #000000 !important;
width: 100% !important;
height: 100% !important;
overflow: visible !important;
margin: 0 !important;
padding: 0 !important;
}
/* 2. Hide all other interactive UI layers completely */
#pdf-loading-overlay,
.modal-overlay,
#global-tooltip,
.zoom-controls-floating,
.overflow-warning-banner,
#overflow-warning {
display: none !important;
}
/* 3. Force container hierarchy to act as transparent full-page boxes positioned at origin */
#app-container,
.workspace,
.preview-panel-outer,
main#preview-panel,
.cv-preview-wrapper,
.cv-preview-container {
display: block !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 210mm !important;
height: 297mm !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
transform: none !important;
overflow: visible !important;
}
/* 4. Hide interactive layout elements like editor column and top bar */
#app-container header.top-bar,
#app-container .workspace aside.editor-panel {
display: none !important;
}
/* 5. Force cv-page itself to match A4 page exactly at origin and strip any shadows/borders */
.cv-page {
width: 210mm !important;
height: 297mm !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
page-break-after: avoid !important;
page-break-inside: avoid !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.cv-page.page-overflow::after {
display: none !important;
content: none !important;
}
}
/* UI Icon Sizing and styling */
svg.btn-icon {
width: 16px;
height: 16px;
fill: currentColor;
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
}
svg.close-icon {
width: 20px;
height: 20px;
fill: currentColor;
display: block;
}
svg.modal-title-icon {
width: 20px;
height: 20px;
fill: var(--db-btn-danger);
display: block;
}
/* Avatar Shapes globally */
.avatar-preview,
.photo-wrap {
&.shape-circle {
border-radius: 50% !important;
img {
border-radius: 50% !important;
}
}
&.shape-rounded {
border-radius: 12% !important;
img {
border-radius: 12% !important;
}
}
&.shape-square {
border-radius: 0% !important;
img {
border-radius: 0% !important;
}
}
}
/* --- CLASES DE SANITIZACIÓN DE ESTILOS INLINE (REFACTORIZACIÓN) --- */
/* Escondidos por defecto */
#tab-tech-skills,
#tab-personality,
#avatar-preview-img,
#photo-upload-input,
#address-suggestions,
#creativo-sidebar-skills-container,
#rosa-additional-info-container {
display: none;
}
/* Espaciados específicos en el panel de control */
#sec-personal .form-fieldset:last-of-type {
margin-top: 15px;
}
#creativo-sidebar-skills-container {
margin-bottom: 15px;
}
.form-section textarea {
height: 100px;
resize: vertical;
}
/* Clases utilitarias y layout de repeaters */
.skill-grid-with-level {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 12px;
width: 100%;
}
.skill-grid-no-level {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
width: 100%;
}
.personality-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 12px;
width: 100%;
}
.lang-simple-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
align-items: flex-end;
}
.lang-simple-grid .form-group {
margin-bottom: 0;
}
.lang-percentage-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
align-items: flex-end;
}
.lang-percentage-grid .form-group {
margin-bottom: 0;
}
.lang-percentage-grid .form-group-slider {
align-self: end;
}
.lang-percentage-grid .slider-label {
margin: 0 0 6px 0;
font-size: 11.5px;
display: block;
line-height: 1.2;
}
/* Estilo global para todos los deslizadores de rango (sliders) del panel */
input[type="range"] {
accent-color: var(--db-accent) !important;
width: 100%;
margin: 0;
display: block;
}
.lang-percentage-grid .lang-input-range {
/* Mantiene especificidad y hereda los estilos base de input[type="range"] */
}
/* Layout para Habilidad con Porcentaje en el panel lateral */
.skill-percentage-grid {
display: flex;
flex-direction: column;
gap: 15px;
.form-group {
margin-bottom: 0;
}
.slider-label {
margin: 0 0 6px 0;
font-size: 11.5px;
display: block;
line-height: 1.2;
}
.skill-input-range {
/* Mantiene especificidad y hereda los estilos base de input[type="range"] */
}
}
/* Clases utilitarias para modales y otros elementos */
.db-info-text {
font-size: 12px;
color: var(--db-text-muted);
line-height: 1.4;
}
.modal-footer-row {
display: flex;
justify-content: flex-end;
}
.btn-secondary-custom,
.btn.btn-secondary-custom,
#btn-reset-colors,
#btn-reset-font {
font-size: 11px;
padding: 8px 14px;
border: 1px dashed var(--action-dashed-border);
background: var(--db-accent-light);
color: var(--db-accent) !important;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: none !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.btn-secondary-custom:hover,
.btn.btn-secondary-custom:hover,
#btn-reset-colors:hover,
#btn-reset-font:hover {
background: var(--db-accent-glow);
border-color: var(--db-accent);
color: var(--db-accent) !important;
box-shadow: none !important;
transform: translateY(-1px);
}
.btn-secondary-custom:active,
.btn.btn-secondary-custom:active,
#btn-reset-colors:active,
#btn-reset-font:active {
transform: translateY(0);
background: var(--action-dashed-hover-bg);
}
/* Contenedor select general con flecha personalizada */
.select-wrapper {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.select-wrapper select {
width: 100% !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
padding-right: 36px !important;
}
.select-wrapper select::-ms-expand {
display: none !important;
}
.select-wrapper .dropdown-chevron-svg {
position: absolute;
right: 12px;
width: 16px;
height: 16px;
fill: var(--db-text-muted) !important;
pointer-events: none;
transition: fill 0.2s ease, transform 0.2s ease;
margin: 0 !important;
}
.select-wrapper:focus-within .dropdown-chevron-svg,
.select-wrapper:hover .dropdown-chevron-svg {
fill: var(--db-accent) !important;
transform: translateY(1px);
}
/* Selector de tipografías personalizado */
.custom-select-container {
position: relative;
width: 100%;
}
.custom-select-trigger {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
background-color: var(--db-input-bg);
border: 1px solid var(--db-border);
color: var(--db-text);
padding: 10px 12px;
font-size: 13.5px;
border-radius: 6px;
outline: none;
cursor: pointer;
transition: all 0.2s;
}
.custom-select-trigger .dropdown-chevron-svg {
width: 16px;
height: 16px;
fill: currentColor;
margin-left: 8px;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.custom-select-container.active .custom-select-trigger .dropdown-chevron-svg {
transform: rotate(180deg);
}
.custom-select-trigger:focus,
.custom-select-container.active .custom-select-trigger {
border-color: var(--db-accent);
box-shadow: 0 0 0 2px var(--db-accent-glow);
}
.custom-select-options {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
width: 100%;
background: var(--db-card-bg);
border: 1px solid var(--db-border);
border-radius: 6px;
box-shadow: var(--shadow-md);
z-index: 100;
max-height: 200px;
overflow-y: auto;
opacity: 0;
transform: translateY(8px);
}
.custom-select-container.active .custom-select-options {
display: block;
animation: dropdownSlideIn 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
/* Desplegable de tipografía específico (abre hacia arriba) */
#custom-font-select-container {
.custom-select-options {
top: auto;
bottom: calc(100% + 4px);
transform: translateY(-8px);
}
&.active .custom-select-options {
display: block;
animation: dropdownSlideUp 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
}
@keyframes dropdownSlideUp {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes dropdownSlideIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.custom-select-option {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
color: var(--db-text);
cursor: pointer;
transition: all 0.2s;
}
.custom-select-option:hover {
background-color: var(--db-bg);
color: var(--db-text);
}
.custom-select-option.selected {
background-color: var(--db-accent-glow);
color: var(--db-accent);
font-weight: 600;
}
.custom-select-option-text {
font-size: 14.5px;
}
.custom-select-option-preview {
font-size: 11px;
color: var(--db-text-muted);
}
/* Evitar desbordamientos en el editor y el CV de forma limpia */
.form-section textarea,
.form-group textarea,
.form-group input,
.form-group select {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.cv-page .item-desc:not(ul):not(ol),
.cv-page .profile-text,
.cv-page li {
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: break-word;
}
.border-top-dashed {
border-top: 1px dashed var(--db-border);
padding-top: 12px;
margin-top: 5px;
}
.modal-title-wrapper {
display: flex;
align-items: center;
gap: 8px;
}
.icon-danger-custom {
width: 20px;
height: 20px;
fill: var(--db-btn-danger);
}
.m-0 {
margin: 0 !important;
}
.modal-body-text {
font-size: 13.5px;
color: var(--db-text);
line-height: 1.5;
margin: 0;
}
.modal-danger-text {
font-size: 12px;
color: var(--db-btn-danger);
font-weight: 600;
margin: 8px 0 0 0;
}
/* Ocultar dinámicamente opciones según los flags de características del editor */
.editor-panel.hide-skill-levels {
.level-group {
display: none !important;
}
.personality-grid {
grid-template-columns: 1fr;
}
}
.editor-panel.hide-buttons #sec-experience .nested-fieldset,
.editor-panel.hide-buttons #sec-education .nested-fieldset {
display: none !important;
}
/* Ocultar nivel de cualidades individualmente */
.personality-grid.hide-levels {
grid-template-columns: 1fr !important;
.level-group {
display: none !important;
}
}
/* BANNER DE ADVERTENCIA DE DESBORDAMIENTO A4 */
.overflow-warning-banner {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(254, 243, 199, 0.95);
border: 1.5px solid #f59e0b;
border-radius: 8px;
padding: 10px 16px;
z-index: 100;
box-shadow: 0 8px 20px rgba(245, 158, 11, 0.15), 0 4px 8px rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
gap: 10px;
width: calc(100% - 60px);
max-width: 580px;
backdrop-filter: blur(6px);
animation: slide-down-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
@keyframes slide-down-fade {
from {
transform: translate(-50%, -15px);
opacity: 0;
}
to {
transform: translate(-50%, 0);
opacity: 1;
}
}
.overflow-warning-content {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
}
.warning-icon-svg {
width: 18px;
height: 18px;
fill: #d97706;
flex-shrink: 0;
}
.warning-text {
font-size: 12.5px;
color: #92400e;
font-weight: 600;
line-height: 1.35;
}
/* INDICADOR DE DESBORDAMIENTO EN EL CV */
.cv-page.page-overflow {
position: relative;
}
.cv-page.page-overflow::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 6px;
background: repeating-linear-gradient(45deg,
#ef4444,
#ef4444 8px,
#ffffff 8px,
#ffffff 16px);
z-index: 9999;
box-shadow: 0 -2px 10px rgba(239, 68, 68, 0.4);
pointer-events: none;
animation: pulse-overflow 2s infinite ease-in-out;
}
@keyframes pulse-overflow {
0%,
100% {
opacity: 0.8;
}
50% {
opacity: 1;
}
}
/* Ocultar botones de estudios o experiencias individualmente */
.editor-panel.hide-education-buttons #sec-education .nested-fieldset {
display: none !important;
}
.editor-panel.hide-experience-buttons #sec-experience .nested-fieldset {
display: none !important;
}
/* Estilo para botón de borrar enlace */
.btn-clear-link {
background: transparent;
border: 1px solid var(--db-border);
color: var(--db-text-muted);
border-radius: 6px;
padding: 6px 12px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
margin-top: 8px;
transition: all 0.2s ease-in-out;
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
align-self: flex-start;
}
.btn-clear-link:hover {
background: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.4);
color: var(--state-danger);
}
/* --- MODAL SELECTOR DE PLANTILLAS --- */
#template-modal {
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(12px);
}
#template-modal.active .modal-content {
opacity: 1;
transform: scale(1) translateY(0);
}
#template-modal .modal-content {
background: var(--db-card-bg);
border: 1px solid var(--db-border);
border-radius: 16px;
width: 90%;
max-width: 960px;
max-height: 85vh;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-lg), 0 24px 64px rgba(0, 0, 0, 0.4);
opacity: 0;
transform: scale(0.95) translateY(15px);
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
overflow: hidden;
}
.modal-header {
padding: 24px 32px;
border-bottom: 1px solid var(--db-border);
display: flex;
justify-content: space-between;
align-items: center;
background: var(--db-bg);
}
.modal-header h2 {
font-size: 20px;
font-weight: 600;
color: var(--db-text);
letter-spacing: 0.5px;
margin: 0;
}
.btn-close-modal {
background: transparent;
border: none;
color: var(--db-text-muted);
font-size: 28px;
line-height: 1;
cursor: pointer;
padding: 4px;
transition: color 0.2s ease, transform 0.2s ease;
}
.btn-close-modal:hover {
color: var(--db-text);
transform: scale(1.1);
}
.modal-body {
padding: 32px;
overflow-y: auto;
flex: 1;
}
/* Cuadrícula de plantillas */
.template-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 24px;
justify-content: center;
}
/* Tarjeta individual de plantilla */
.template-card {
display: flex;
flex-direction: column;
align-items: center;
background: var(--db-card-bg);
border: 1px solid var(--db-border);
border-radius: 12px;
padding: 16px;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.template-card:hover {
background: var(--db-bg);
border-color: var(--db-border-hover);
transform: translateY(-4px);
box-shadow: var(--db-shadow);
}
.template-card.active {
background: var(--db-accent-light);
border-color: var(--db-accent);
box-shadow: 0 0 15px var(--db-accent-glow);
}
.template-card-preview {
width: 140px;
height: 198px;
/* Relación de aspecto estándar A4 (1:1.41) */
background: white;
border-radius: 6px;
border: 1px solid var(--db-border);
box-shadow: var(--db-shadow);
position: relative;
overflow: hidden;
transition: all 0.25s ease;
display: flex;
flex-direction: column;
user-select: none;
}
.template-card:hover .template-card-preview {
transform: scale(1.02);
box-shadow: var(--db-shadow);
}
.template-card.active .template-card-preview {
border-color: var(--db-accent);
box-shadow: 0 0 12px var(--db-accent-glow);
}
/* Escalado de elementos internos de vista previa */
.template-card-preview svg {
width: 100%;
height: 100%;
display: block;
}
.template-card-info {
margin-top: 14px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
width: 100%;
}
.template-card-name {
font-size: 14px;
font-weight: 600;
color: var(--db-text-muted);
transition: color 0.2s ease;
text-align: center;
}
.template-card:hover .template-card-name {
color: var(--db-text);
}
.template-card.active .template-card-name {
color: var(--db-accent);
}
.template-badge {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 12px;
background: var(--db-input-bg);
color: var(--db-text-muted);
letter-spacing: 0.5px;
transition: all 0.2s ease;
}
.template-card.active .template-badge {
background: var(--db-accent);
color: var(--text-on-brand);
}
/* Animación del spinner para la descarga directa de PDF */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.spinner-icon {
animation: spin 1s linear infinite;
}
/* Pantalla de Carga/Bloqueo para Descarga de PDF */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(15, 23, 42, 0.88);
/* Fondo oscuro translúcido */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s;
}
.loading-overlay.active {
opacity: 1;
visibility: visible;
}
.loading-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: var(--text-on-brand);
gap: 16px;
animation: fadeInUp 0.4s ease-out;
}
/* Animación de puntos de carga modernos */
.loading-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
height: 40px;
}
.loading-dots span {
width: 12px;
height: 12px;
background-color: var(--db-accent);
border-radius: 50%;
display: inline-block;
animation: bounce 1.4s infinite ease-in-out both;
}
.loading-dots span:nth-child(1) {
animation-delay: -0.32s;
}
.loading-dots span:nth-child(2) {
animation-delay: -0.16s;
}
.loading-content h3 {
font-size: 18px;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--clr-gray-200);
}
.loading-content p {
font-size: 13.5px;
color: var(--clr-gray-400);
max-width: 320px;
line-height: 1.5;
}
@keyframes bounce {
0%,
80%,
100% {
transform: scale(0);
opacity: 0.3;
}
40% {
transform: scale(1.0);
opacity: 1;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ==========================================================================
LOADER PREMIUM DE VISTA PREVIA DEL CV
========================================================================== */
.cv-loader {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--surface-preview);
/* Mismo color de fondo que main#preview-panel */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
z-index: 100;
opacity: 1;
visibility: visible;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cv-loader.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.cv-loader-spinner {
width: 50px;
height: 50px;
border: 4px solid var(--db-border);
border-left-color: var(--db-accent);
border-radius: 50%;
animation: cv-loader-spin 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite;
box-shadow: 0 0 20px var(--db-accent-glow);
}
.cv-loader-text {
color: var(--db-text);
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.5px;
opacity: 0.8;
animation: cv-loader-pulse 1.8s ease-in-out infinite;
}
.cv-runtime-error {
width: 100%;
min-height: 100%;
padding: 64px;
background: var(--surface-card);
color: var(--text-primary);
display: flex;
flex-direction: column;
justify-content: center;
border: 1px solid rgba(214, 58, 58, 0.22);
}
.cv-runtime-error__eyebrow {
width: fit-content;
margin-bottom: 16px;
padding: 6px 10px;
border-radius: 4px;
background: rgba(214, 58, 58, 0.08);
color: var(--state-danger-hover);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
}
.cv-runtime-error h2 {
max-width: 520px;
margin: 0;
color: var(--text-primary);
font-size: 1.65rem;
line-height: 1.2;
}
.cv-runtime-error p {
max-width: 560px;
margin: 14px 0 0;
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.55;
}
@keyframes cv-loader-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes cv-loader-pulse {
0%,
100% {
opacity: 0.5;
}
50% {
opacity: 0.95;
}
}
/* Transiciones para la vista previa del CV */
main#preview-panel.is-loading {
overflow: hidden;
}
main#preview-panel.is-loading .cv-preview-wrapper {
opacity: 0;
transform: scale(0.96);
pointer-events: none;
}
main#preview-panel .cv-preview-wrapper {
opacity: 1;
transform: scale(1);
transform-origin: center center;
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ==========================================================================
MODAL DE CORRECCIÓN ORTOGRÁFICA (LANGUAGE TOOL)
========================================================================== */
#grammar-modal {
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(12px);
}
#grammar-modal.active .modal-content {
opacity: 1;
transform: scale(1) translateY(0);
}
#grammar-modal .modal-content {
background: var(--db-card-bg);
border: 1px solid var(--db-border);
border-radius: 16px;
width: 90%;
max-width: 760px;
max-height: 85vh;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-lg), 0 24px 64px rgba(0, 0, 0, 0.4);
opacity: 0;
transform: scale(0.95) translateY(15px);
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
overflow: hidden;
}
/* Estado de carga */
.grammar-loading-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
color: var(--db-text-muted);
}
.grammar-loader-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--db-border);
border-left-color: var(--db-accent);
border-radius: 50%;
animation: cv-loader-spin 1s linear infinite;
margin-bottom: 16px;
box-shadow: 0 0 15px var(--db-accent-glow);
}
/* Estado vacío / Éxito */
.grammar-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 20px;
}
.grammar-empty-state h3 {
font-size: 18px;
color: var(--db-text);
margin-bottom: 8px;
}
.grammar-empty-state p {
font-size: 13.5px;
color: var(--db-text-muted);
max-width: 320px;
}
/* Listado de resultados */
.grammar-results-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.grammar-result-card {
background: var(--db-bg);
border: 1px solid var(--db-border);
border-radius: 10px;
padding: 16px;
transition: opacity 0.3s ease;
}
.grammar-result-header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--db-accent);
margin-bottom: 12px;
border-bottom: 1px solid var(--db-border);
padding-bottom: 8px;
}
.grammar-result-text {
font-size: 13.5px;
line-height: 1.6;
color: var(--db-text);
background: var(--db-input-bg);
padding: 12px 16px;
border-radius: 6px;
border: 1px solid var(--db-border);
margin-bottom: 14px;
}
/* Resaltado de errores */
.grammar-highlight-error {
background-color: rgba(239, 68, 68, 0.12);
border-bottom: 2px dashed var(--state-danger);
color: var(--state-danger-hover);
padding: 1px 2px;
border-radius: 2px;
font-weight: 600;
}
.grammar-error-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.grammar-error-item {
background: var(--db-card-bg);
border-left: 3px solid var(--state-danger);
padding: 8px 12px;
border-radius: 0 6px 6px 0;
display: flex;
flex-direction: column;
gap: 8px;
transition: all 0.3s ease;
}
.grammar-error-item.resolved {
border-left-color: var(--state-success);
background: rgba(16, 185, 129, 0.06);
opacity: 0.5;
}
.grammar-error-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.grammar-error-message {
font-size: 13px;
color: var(--db-text);
line-height: 1.4;
}
.grammar-suggestions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.grammar-suggestions-title {
font-size: 11px;
color: var(--db-text-muted);
font-weight: 600;
margin-right: 4px;
}
.btn-suggestion {
font-size: 11px;
padding: 4px 10px;
background: rgba(16, 185, 129, 0.08);
border: 1px solid rgba(16, 185, 129, 0.2);
color: #047857;
/* verde fijo — no es paleta de marca, es estado de éxito */
border-radius: 4px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s ease;
}
.btn-suggestion:hover {
background: rgba(16, 185, 129, 0.16);
border-color: #047857;
transform: translateY(-1px);
}
.btn-suggestion:active {
transform: translateY(0);
}
.btn-omit-error {
font-size: 11px;
padding: 4px 10px;
background: rgba(239, 68, 68, 0.06);
border: 1px solid rgba(239, 68, 68, 0.18);
color: var(--state-danger-hover);
border-radius: 4px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s ease;
}
.btn-omit-error:hover {
background: rgba(239, 68, 68, 0.12);
border-color: var(--state-danger-hover);
transform: translateY(-1px);
}
.btn-omit-error:active {
transform: translateY(0);
}
.btn-restore-error {
font-size: 11px;
padding: 4px 10px;
background: var(--db-bg);
border: 1px solid var(--db-border);
color: var(--db-text);
border-radius: 4px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s ease;
}
.btn-restore-error:hover {
background: var(--db-border);
border-color: var(--db-border-hover);
transform: translateY(-1px);
}
.btn-restore-error:active {
transform: translateY(0);
}
/* Estilos de botones generales (desanidados para uso en modales y otras áreas) */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--db-card-bg);
border: 1px solid var(--db-border);
color: var(--db-text);
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
outline: none;
}
.btn:hover {
background: var(--db-bg);
border-color: var(--db-border-hover);
}
.btn.btn-primary {
background: linear-gradient(135deg, var(--db-primary) 0%, var(--db-accent) 100%);
color: var(--text-on-brand);
border-color: var(--db-primary);
font-weight: 600;
}
.btn.btn-primary:hover {
background: linear-gradient(135deg, var(--db-primary-hover) 0%, var(--db-accent-hover) 100%);
border-color: var(--db-primary-hover);
box-shadow: none;
transform: translateY(-1px);
}
/* Nuevas clases de botones para la cabecera / barra de herramientas */
.btn-pill-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(135deg, var(--db-primary) 0%, var(--db-accent) 100%);
color: #ffffff;
border: 1px solid var(--db-primary);
padding: 8px 18px;
font-size: 13px;
font-weight: 600;
border-radius: var(--db-radius-sm);
cursor: pointer;
transition: all 0.2s ease;
box-shadow: none;
outline: none;
}
.btn-pill-primary:hover {
background: linear-gradient(135deg, var(--db-primary-hover) 0%, var(--db-accent-hover) 100%);
border-color: var(--db-primary-hover);
box-shadow: none;
}
.btn-pill-primary:active {
transform: translateY(0);
}
.btn-pill-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--db-card-bg);
color: var(--db-text);
border: 1px solid var(--db-border);
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
border-radius: var(--db-radius-sm);
cursor: pointer;
transition: all 0.2s ease;
outline: none;
}
.btn-pill-secondary:hover {
background: var(--db-primary-light);
border-color: var(--db-primary);
color: var(--db-primary);
}
.btn-pill-secondary:active {
transform: translateY(0);
}
.btn-icon-only {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--db-card-bg);
color: var(--db-text-muted);
border: 1px solid var(--db-border);
border-radius: 50%;
cursor: pointer;
transition: all 0.2s ease;
outline: none;
}
.btn-icon-only:hover {
background: var(--db-primary-light);
color: var(--db-primary);
border-color: var(--db-primary);
transform: translateY(-1px);
}
.btn-icon-only:active {
transform: translateY(0);
}
/* Divisor visual en la barra de controles */
.controls-divider {
width: 1px;
height: 24px;
background: var(--border-subtle);
flex-shrink: 0;
}
/* (Orphan .btn-theme-toggle styles removed for cleanliness) */
.btn-pill-primary i.ti,
.btn-pill-secondary i.ti,
.btn-icon-only i.ti {
font-size: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.btn-pill-primary svg,
.btn-pill-secondary svg,
.btn-icon-only svg {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
fill: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Estilos sanitizados de index.html (Remoción de inline styles) */
#btn-clear-photo {
display: none;
margin-top: 8px;
width: 100%;
justify-content: center;
}
#overflow-warning {
display: none;
}
#grammar-badge {
background: rgba(239, 68, 68, 0.15);
color: var(--state-danger);
display: none;
}
#grammar-loading,
#grammar-empty,
#btn-apply-all-grammar {
display: none;
}
.grammar-empty-icon {
width: 64px;
height: 64px;
margin-bottom: 16px;
display: inline-block;
}
.grammar-modal-footer-custom {
padding: 18px 32px;
border-top: 1px solid var(--db-border);
display: flex;
justify-content: space-between;
align-items: center;
background: var(--db-bg);
}
.grammar-powered-text {
font-size: 11px;
}
.grammar-modal-footer-row {
gap: 12px;
display: flex;
align-items: center;
}
/* Selector de Skins en el panel de control */
.skin-selector-wrapper {
display: none;
margin-bottom: 20px;
}
/* Estilo global para sub-fieldsets (fieldsets anidados) */
fieldset.nested-fieldset {
background: var(--surface-input);
border: 1px solid rgba(148, 163, 184, 0.25);
border-top-color: var(--rim-top-left);
border-left-color: var(--rim-top-left);
border-bottom-color: var(--rim-bottom-right);
border-right-color: var(--rim-bottom-right);
border-radius: var(--db-radius-md);
padding: 14px;
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
box-shadow: inset 0 1px 0 var(--rim-top-left);
legend {
font-size: 10px;
font-weight: 700;
color: var(--db-text-muted);
padding: 0 8px;
text-transform: uppercase;
letter-spacing: 0.8px;
text-shadow: none;
}
}
.skins-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.skin-btn {
background: var(--db-input-bg);
border: 1px solid var(--db-border);
border-radius: 8px;
padding: 8px 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.2s ease-in-out;
outline: none;
}
.skin-btn:hover {
border-color: var(--db-border-hover);
background: var(--db-bg);
}
.skin-btn.active {
border-color: var(--db-accent);
background: var(--db-accent-glow);
box-shadow: 0 0 10px var(--db-accent-glow);
}
.skin-btn-name {
font-size: 11.5px;
color: var(--db-text);
font-weight: 500;
text-align: left;
}
.skin-btn.active .skin-btn-name {
color: var(--db-accent);
}
.skin-preview-dots {
display: flex;
gap: 4px;
align-items: center;
}
.skin-preview-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid var(--db-border);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Animación global de transición al cambiar de sección */
@keyframes fadeInSection {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Estilos unificados y globales para botones de eliminar (.btn-remove) */
.btn-remove {
background: transparent !important;
border: none !important;
border-radius: 6px !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
cursor: pointer !important;
flex-shrink: 0 !important;
box-shadow: none !important;
transform: none !important;
}
.btn-remove svg {
width: 18px !important;
height: 18px !important;
color: var(--db-text-muted) !important;
fill: var(--db-text-muted) !important;
opacity: 0.85 !important;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease, fill 0.2s ease, opacity 0.2s ease !important;
}
.btn-remove:hover svg {
transform: scale(1.15) !important;
color: var(--state-danger) !important;
fill: var(--state-danger) !important;
opacity: 1 !important;
}
/* ==========================================================================
SISTEMA DE TOOLTIPS CLAROS Y PERSONALIZADOS (SCANDINAVIAN MINIMALIST)
========================================================================== */
[data-tooltip],
[data-tooltip-up],
[data-tooltip-left],
[data-tooltip-right] {
position: relative;
}
#global-tooltip {
position: fixed;
background: var(--db-card-bg);
color: var(--db-text);
border: 1px solid var(--db-border);
padding: 6px 12px;
font-size: 11px;
font-weight: 500;
border-radius: 6px;
white-space: nowrap;
box-shadow: var(--db-shadow-lg);
pointer-events: none;
z-index: 100000;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.12s cubic-bezier(0.4, 0, 0.2, 1), transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
letter-spacing: 0.1px;
}
#global-tooltip.active {
opacity: 1;
transform: translateY(0);
}
/* ==========================================================================
MODAL DE OPCIONES DE EXPORTACIÓN PDF
========================================================================== */
.modal-card.modal-download-card {
max-width: 760px;
border-radius: 16px;
}
.download-options-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 15px;
}
.download-option-card {
background: var(--surface-input);
border: 1px solid var(--db-border);
border-radius: 12px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.download-option-card:hover {
border-color: var(--db-accent);
background: var(--surface-card);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.download-option-card.recommended {
border: 2px solid var(--db-accent);
box-shadow: 0 8px 30px var(--db-accent-glow);
background: var(--surface-card);
}
.download-option-card.recommended:hover {
box-shadow: 0 12px 35px var(--db-accent-glow);
}
.download-option-card .option-badge {
position: absolute;
top: -12px;
left: 20px;
background: var(--db-accent);
color: var(--text-on-brand);
font-size: 10px;
font-weight: 700;
padding: 4px 10px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px var(--db-accent-glow);
}
.option-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: var(--db-accent-glow);
color: var(--db-accent);
border-radius: 10px;
font-size: 24px;
flex-shrink: 0;
}
.option-content {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.option-content h5 {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 8px 0;
}
.option-content p {
font-size: 12.5px;
color: var(--text-secondary);
line-height: 1.5;
margin: 0 0 16px 0;
}
.option-settings-tip {
background: var(--surface-input);
border: 1px solid var(--db-border);
border-radius: 8px;
padding: 12px 14px;
font-size: 11px;
color: var(--text-secondary);
line-height: 1.4;
margin-top: auto;
}
.option-settings-tip strong {
color: var(--text-primary);
display: block;
margin-bottom: 6px;
}
.option-settings-tip ul {
margin: 0;
padding-left: 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.option-settings-tip li {
list-style-type: disc;
}
.btn-option-action {
width: 100%;
padding: 12px !important;
font-size: 13px !important;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 600;
}
/* Responsivo para el grid de descarga */
@media screen and (max-width: 768px) {
.download-options-grid {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* ==========================================================================
Sistema de Notificaciones (Toasts) — VectorCV
========================================================================== */
.toast-container {
position: fixed;
top: 24px;
right: 24px;
display: flex;
flex-direction: column;
gap: 12px;
z-index: 99999;
pointer-events: none;
max-width: 380px;
width: calc(100vw - 48px);
}
.toast-notification {
pointer-events: auto;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 20px 16px 16px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(226, 232, 240, 0.8);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
transform: translateX(120%);
opacity: 0;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, margin 0.3s ease, padding 0.3s ease, height 0.3s ease;
position: relative;
overflow: hidden;
}
.toast-notification.active {
transform: translateX(0);
opacity: 1;
}
.toast-notification.removing {
transform: translateX(120%);
opacity: 0;
pointer-events: none;
}
.toast-notification i.toast-icon {
font-size: 20px;
line-height: 1;
margin-top: 1px;
flex-shrink: 0;
}
.toast-notification .toast-content {
flex-grow: 1;
}
.toast-notification .toast-message {
font-family: 'Inter', sans-serif;
font-size: 13.5px;
font-weight: 500;
line-height: 1.5;
color: var(--clr-gray-800);
}
.toast-notification .toast-close {
background: none;
border: none;
padding: 4px;
cursor: pointer;
color: var(--clr-gray-400);
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: all 0.2s ease;
margin-top: -2px;
margin-right: -8px;
flex-shrink: 0;
}
.toast-notification .toast-close:hover {
color: var(--clr-gray-700);
background: rgba(0, 0, 0, 0.05);
}
/* Tipos de Toast */
.toast-notification.toast-error {
border-left: 4px solid var(--clr-danger);
}
.toast-notification.toast-error i.toast-icon {
color: var(--clr-danger);
}
.toast-notification.toast-success {
border-left: 4px solid var(--clr-success);
}
.toast-notification.toast-success i.toast-icon {
color: var(--clr-success);
}
.toast-notification.toast-warning {
border-left: 4px solid var(--clr-warning);
}
.toast-notification.toast-warning i.toast-icon {
color: var(--clr-warning);
}
.toast-notification.toast-info {
border-left: 4px solid var(--clr-blue-600);
}
.toast-notification.toast-info i.toast-icon {
color: var(--clr-blue-600);
}
/* Progress bar inside toast */
.toast-notification .toast-progress {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 100%;
transform-origin: left;
background: rgba(0, 0, 0, 0.08);
}
.toast-notification.toast-error .toast-progress {
background: rgba(239, 68, 68, 0.3);
}
.toast-notification.toast-success .toast-progress {
background: rgba(16, 185, 129, 0.3);
}
.toast-notification.toast-warning .toast-progress {
background: rgba(245, 158, 11, 0.3);
}
.toast-notification.toast-info .toast-progress {
background: rgba(37, 99, 235, 0.3);
}
/* ==========================================================================
Fail-safes de Layout para Exportación de Documentos
========================================================================== */
/* Permite que los títulos se dividan en varias líneas en columnas angostas (como el lateral de moderno) */
.cv-page .section-title h2,
.cv-page .right-section-title h2,
.cv-page .section-title,
.cv-page .right-section-title,
.cv-page h2 {
white-space: normal;
word-wrap: break-word;
}
/* ==========================================================================
SISTEMA DE MODO OSCURO (DARK MODE) — VectorCV
========================================================================== */
/* 1. Redefinición de tokens semánticos en modo oscuro */
/* ==========================================================================
SISTEMA AMBER SLATE — Dark Mode VectorCV
Pizarra profunda + carbón + acento ámbar vibrante
========================================================================== */
[data-theme="dark"] header.top-bar .brand h1 {
color: #ffffff !important;
}
[data-theme="dark"] {
/* — Superficies — */
--surface-canvas: #151618;
/* Fondo base de la web - casi negro */
--surface-preview: #0F1011;
/* Fondo ultra oscuro del visor A4 */
--surface-float: rgba(30, 31, 34, 0.95);
/* Top bar flotante */
--surface-card: #1E1F22;
/* Panel de edición */
--surface-input: #2C2D30;
/* Inputs y fieldsets en reposo - color del moderno */
--surface-input-focus: #37383D;
/* Inputs activos */
--surface-overlay: rgba(15, 16, 18, 0.88);
/* — Texto — */
--text-primary: #F3EFE6;
/* Blanco crema suave, máxima legibilidad, color bgLight del moderno */
--text-secondary: #E2E8F0;
/* Gris muy claro (casi blanco) para textos secundarios */
--text-muted: #E2E8F0;
/* Labels y títulos de inputs ahora en color blanco/gris muy claro */
--text-placeholder: #7A7B7E;
--text-on-brand: #151618;
/* Texto oscuro sobre botones dorados */
/* — Bordes — */
--border-subtle: rgba(201, 162, 39, 0.15);
/* Contorno dorado muy sutil */
--border-default: #333438;
/* Bordes estándar */
--border-emphasis: #C9A227;
/* Dorado mate al enfocar */
/* — Highlights de borde skeuomórfico — invertidos para dark — */
--rim-top-left: rgba(255, 255, 255, 0.05);
--rim-bottom-right: rgba(0, 0, 0, 0.4);
/* — Sombras densas para profundidad — */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
--shadow-float: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 20px 40px -15px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.4);
--shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 4px 14px -4px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
/* — Sistema de Acentos: Dorado Mate — */
--db-accent: #C9A227;
--db-accent-hover: #B08C1F;
--db-accent-glow: rgba(201, 162, 39, 0.18);
--db-accent-light: rgba(201, 162, 39, 0.07);
/* — Marca primaria → Dorado en dark — */
--brand-primary: #C9A227;
--brand-primary-hover: #B08C1F;
--brand-primary-glow: rgba(201, 162, 39, 0.18);
--brand-primary-light: rgba(201, 162, 39, 0.07);
--brand-accent: #C9A227;
--brand-accent-hover: #B08C1F;
--brand-accent-glow: rgba(201, 162, 39, 0.18);
--brand-accent-light: rgba(201, 162, 39, 0.07);
/* — Botones de acción (dashed, añadir/remover) → Dorado Mate — */
--action-dashed-border: #C9A227;
--action-dashed-bg: rgba(201, 162, 39, 0.05);
--action-dashed-hover-border: #C9A227;
--action-dashed-hover-bg: rgba(201, 162, 39, 0.10);
--action-dashed-active-bg: rgba(201, 162, 39, 0.15);
}
/* — Todos los Fieldsets y tarjetas repetidoras en modo oscuro — */
[data-theme="dark"] .editor-panel fieldset,
[data-theme="dark"] .editor-panel .repeater-card {
background: #1E1F22 !important;
border-color: #2C2D30 !important;
&:focus-within {
background: #1E1F22 !important;
border-color: #C9A227 !important;
box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.2), var(--shadow-card) !important;
}
}
/* — Legend brilla en dorado mate — */
[data-theme="dark"] .editor-panel legend {
color: #C9A227 !important;
}
[data-theme="dark"] .editor-panel legend[contenteditable="true"] {
&:hover {
border-color: #C9A227 !important;
background-color: rgba(201, 162, 39, 0.1) !important;
background-image: url("data:image/svg+xml;utf8,") !important;
}
&:focus {
border-color: #C9A227 !important;
background-color: rgba(201, 162, 39, 0.1) !important;
box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.2) !important;
background-image: url("data:image/svg+xml;utf8,") !important;
}
}
/* — Nested fieldsets en dark — */
[data-theme="dark"] .editor-panel fieldset.nested-fieldset,
[data-theme="dark"] .editor-panel fieldset fieldset {
background: #2C2D30 !important;
border-color: #38393D !important;
&:focus-within {
background: #2C2D30 !important;
}
}
/* — Etiquetas / Labels y títulos en blanco puro — */
[data-theme="dark"] .editor-panel label,
[data-theme="dark"] .editor-panel .form-group label,
[data-theme="dark"] .editor-panel .date-field span,
[data-theme="dark"] .editor-panel .input-row label {
color: #FFFFFF !important;
}
/* — Títulos de sección en blanco puro — */
[data-theme="dark"] .editor-panel h3,
[data-theme="dark"] .form-section h3,
[data-theme="dark"] .loading-content h3 {
color: #FFFFFF !important;
}
/* — Inputs de texto, selectores y textarea en color oscuro de Moderno — */
[data-theme="dark"] .editor-panel input[type="text"],
[data-theme="dark"] .editor-panel input[type="email"],
[data-theme="dark"] .editor-panel input[type="url"],
[data-theme="dark"] .editor-panel input[type="month"],
[data-theme="dark"] .editor-panel input[type="date"],
[data-theme="dark"] .editor-panel select,
[data-theme="dark"] .editor-panel textarea {
background-color: #2C2D30 !important;
color: #F3EFE6 !important;
border-color: #333438 !important;
&:hover {
background-color: #1E1F22 !important;
border-color: #3C3D42 !important;
}
&:focus {
background-color: #37383D !important;
border-color: #C9A227 !important;
box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.2) !important;
}
}
[data-theme="dark"] .editor-panel input[type="month"],
[data-theme="dark"] .editor-panel input[type="date"] {
background-image: url('data:image/svg+xml;utf8,') !important;
}
/* — Anular el fondo celeste de autocompletado en navegadores (Chrome/Edge/Safari) — */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] input:-webkit-autofill:active,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] textarea:-webkit-autofill:hover,
[data-theme="dark"] textarea:-webkit-autofill:focus,
[data-theme="dark"] select:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill:hover,
[data-theme="dark"] select:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px #2C2D30 inset !important;
-webkit-text-fill-color: #F3EFE6 !important;
transition: background-color 5000s ease-in-out 0s !important;
}
/* — Coherencia de color en botones de píldora primarios (dorado con texto oscuro) — */
[data-theme="dark"] .btn-pill-primary {
color: #151618 !important;
}
[data-theme="dark"] .btn-pill-primary i.ti,
[data-theme="dark"] .btn-pill-primary svg {
color: #151618 !important;
fill: #151618 !important;
}
/* — Fondo radial del body: dorado mate muy tenue — */
[data-theme="dark"] body {
background-image:
radial-gradient(at 0% 0%, rgba(201, 162, 39, 0.04) 0px, transparent 45%),
radial-gradient(at 100% 100%, rgba(201, 162, 39, 0.02) 0px, transparent 45%) !important;
}
/* — Scrollbar en dark mode — */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.08);
&:hover {
background: rgba(201, 162, 39, 0.5);
}
}
/* ==========================================================================
TRANSICIONES Y ANIMACIÓN DEL BOTÓN DE TEMA
========================================================================== */
/* El cambio de tema claro/oscuro se realiza de forma instantánea para evitar lag en repintado del DOM
y prevenir glitches visuales en los bordes y sombras de elementos internos complejos. */
/* Contenedor del botón de preferencias — parte inferior del nav */
.nav-settings-wrapper {
position: relative;
width: 100%;
padding: 8px 0;
border-top: 1px solid var(--border-subtle);
flex-shrink: 0;
}
/* Botón de alternancia de tema en el sidebar (versión de escritorio) */
nav.editor-tabs .nav-settings-wrapper .tab-btn.btn-theme-toggle-action {
border-radius: var(--db-radius-sm);
border: none;
background: transparent;
width: calc(100% - 16px);
height: 36px;
margin: 4px 8px;
padding: 8px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
box-shadow: none;
}
nav.editor-tabs .nav-settings-wrapper .tab-btn.btn-theme-toggle-action:hover {
background: var(--db-bg);
border-radius: var(--db-radius-sm);
color: var(--db-text);
}
nav.editor-tabs .nav-settings-wrapper .tab-btn.btn-theme-toggle-action i {
font-size: 20px;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
opacity: 0.75;
transition: opacity 0.2s ease, transform 0.2s ease;
}
nav.editor-tabs .nav-settings-wrapper .tab-btn.btn-theme-toggle-action:hover i {
opacity: 1;
transform: scale(1.05);
}
/* Utilidades de visibilidad */
.mobile-only-control {
display: none !important;
}