/* ============================================================
   Conversor de Texto PRO — style.css
   ============================================================ */

/* ---------- CSS Custom Properties ---------- */
.ctp-wrapper[data-theme="dark"] {
	--ctp-bg:           #1a1a1a;
	--ctp-surface:      #242424;
	--ctp-surface-2:    #2e2e2e;
	--ctp-surface-3:    #383838;
	--ctp-border:       #3a3a3a;
	--ctp-border-hover: #555;
	--ctp-text:         #e8e8e8;
	--ctp-text-muted:   #888;
	--ctp-text-dim:     #555;
	--ctp-accent:       #6c63ff;
	--ctp-accent-hover: #7c74ff;
	--ctp-accent-rgb:   108, 99, 255;
	--ctp-green:        #22c55e;
	--ctp-yellow:       #f59e0b;
	--ctp-red:          #ef4444;
	--ctp-shadow:       0 4px 24px rgba(0,0,0,.5);
	--ctp-shadow-sm:    0 2px 8px rgba(0,0,0,.3);
	--ctp-radius:       12px;
	--ctp-radius-sm:    8px;
	--ctp-radius-xs:    6px;
	--ctp-font-size:    16px;
	--ctp-transition:   .18s ease;
}

.ctp-wrapper[data-theme="light"] {
	--ctp-bg:           #f3f4f6;
	--ctp-surface:      #ffffff;
	--ctp-surface-2:    #f9fafb;
	--ctp-surface-3:    #f1f5f9;
	--ctp-border:       #e2e8f0;
	--ctp-border-hover: #a0aec0;
	--ctp-text:         #1a202c;
	--ctp-text-muted:   #6b7280;
	--ctp-text-dim:     #a0aec0;
	--ctp-accent:       #5b52e8;
	--ctp-accent-hover: #4a42d6;
	--ctp-accent-rgb:   91, 82, 232;
	--ctp-green:        #16a34a;
	--ctp-yellow:       #d97706;
	--ctp-red:          #dc2626;
	--ctp-shadow:       0 4px 24px rgba(0,0,0,.08);
	--ctp-shadow-sm:    0 2px 8px rgba(0,0,0,.06);
	--ctp-radius:       12px;
	--ctp-radius-sm:    8px;
	--ctp-radius-xs:    6px;
	--ctp-font-size:    16px;
	--ctp-transition:   .18s ease;
}

/* ---------- Wrapper Reset ---------- */
.ctp-wrapper *,
.ctp-wrapper *::before,
.ctp-wrapper *::after {
	box-sizing: border-box;
	margin:     0;
	padding:    0;
}

.ctp-wrapper {
	background:    var(--ctp-bg);
	color:         var(--ctp-text);
	font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-size:     var(--ctp-font-size);
	line-height:   1.6;
	border-radius: var(--ctp-radius);
	padding:       24px;
	max-width:     100%;
	overflow:      hidden;
	position:      relative;
	box-shadow:    var(--ctp-shadow);
}

/* ---------- Header ---------- */
.ctp-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-wrap:       wrap;
	gap:             12px;
	margin-bottom:   20px;
}

.ctp-header-left {
	display:     flex;
	align-items: center;
	gap:         10px;
}

.ctp-logo-icon {
	width:     36px;
	height:    36px;
	color:     var(--ctp-accent);
	flex-shrink: 0;
}

.ctp-title {
	font-size:   1.25rem;
	font-weight: 700;
	letter-spacing: -.02em;
	color:       var(--ctp-text);
	line-height: 1.2;
}

.ctp-header-actions {
	display:   flex;
	flex-wrap: wrap;
	gap:       6px;
}

/* ---------- Icon Buttons ---------- */
.ctp-btn-icon {
	display:       inline-flex;
	align-items:   center;
	gap:           5px;
	padding:       7px 12px;
	background:    var(--ctp-surface-2);
	border:        1px solid var(--ctp-border);
	border-radius: var(--ctp-radius-xs);
	color:         var(--ctp-text-muted);
	font-size:     .8rem;
	font-weight:   500;
	cursor:        pointer;
	transition:    background var(--ctp-transition), color var(--ctp-transition), border-color var(--ctp-transition);
	white-space:   nowrap;
}

.ctp-btn-icon svg {
	width:  16px;
	height: 16px;
	flex-shrink: 0;
}

.ctp-btn-icon:hover,
.ctp-btn-icon:focus-visible {
	background:    var(--ctp-surface-3);
	border-color:  var(--ctp-border-hover);
	color:         var(--ctp-text);
	outline:       none;
}

.ctp-btn-icon:focus-visible {
	box-shadow: 0 0 0 3px rgba(var(--ctp-accent-rgb), .4);
}

/* ---------- Settings Panel ---------- */
.ctp-settings-panel {
	background:    var(--ctp-surface);
	border:        1px solid var(--ctp-border);
	border-radius: var(--ctp-radius-sm);
	padding:       16px 20px;
	margin-bottom: 16px;
	animation:     ctpSlideDown .2s ease;
}

.ctp-settings-panel[hidden] {
	display: none;
}

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

.ctp-settings-grid {
	display:   flex;
	flex-wrap: wrap;
	gap:       20px;
	align-items: center;
}

.ctp-settings-group {
	display:        flex;
	align-items:    center;
	gap:            10px;
}

.ctp-settings-label {
	font-size:   .85rem;
	color:       var(--ctp-text-muted);
	font-weight: 500;
	white-space: nowrap;
}

.ctp-settings-options {
	display: flex;
	gap:     6px;
}

.ctp-theme-btn {
	display:       inline-flex;
	align-items:   center;
	gap:           5px;
	padding:       6px 12px;
	background:    var(--ctp-surface-2);
	border:        1px solid var(--ctp-border);
	border-radius: var(--ctp-radius-xs);
	color:         var(--ctp-text-muted);
	font-size:     .8rem;
	cursor:        pointer;
	transition:    all var(--ctp-transition);
}

.ctp-theme-btn svg {
	width:  14px;
	height: 14px;
}

.ctp-theme-btn.active,
.ctp-theme-btn[aria-pressed="true"] {
	background:   var(--ctp-accent);
	border-color: var(--ctp-accent);
	color:        #fff;
}

.ctp-theme-btn:hover:not(.active) {
	border-color: var(--ctp-border-hover);
	color:        var(--ctp-text);
}

.ctp-theme-btn:focus-visible {
	outline:    none;
	box-shadow: 0 0 0 3px rgba(var(--ctp-accent-rgb), .4);
}

.ctp-font-size-control {
	display:     flex;
	align-items: center;
	gap:         8px;
}

.ctp-font-btn {
	padding:       4px 10px;
	background:    var(--ctp-surface-2);
	border:        1px solid var(--ctp-border);
	border-radius: var(--ctp-radius-xs);
	color:         var(--ctp-text);
	font-size:     .8rem;
	font-weight:   600;
	cursor:        pointer;
	transition:    all var(--ctp-transition);
}

.ctp-font-btn:hover {
	background:   var(--ctp-accent);
	border-color: var(--ctp-accent);
	color:        #fff;
}

.ctp-font-btn:focus-visible {
	outline:    none;
	box-shadow: 0 0 0 3px rgba(var(--ctp-accent-rgb), .4);
}

#ctp-font-display {
	font-size:  .85rem;
	color:      var(--ctp-text);
	min-width:  38px;
	text-align: center;
}

/* ---------- Textarea ---------- */
.ctp-editor-wrap {
	position:      relative;
	margin-bottom: 2px;
}

.ctp-textarea {
	width:         100%;
	min-height:    200px;
	padding:       16px 16px 36px;
	background:    var(--ctp-surface);
	border:        1.5px solid var(--ctp-border);
	border-radius: var(--ctp-radius-sm);
	color:         var(--ctp-text);
	font-size:     var(--ctp-font-size);
	font-family:   inherit;
	line-height:   1.7;
	resize:        vertical;
	transition:    border-color var(--ctp-transition), box-shadow var(--ctp-transition);
	outline:       none;
}

.ctp-textarea::placeholder {
	color: var(--ctp-text-dim);
}

.ctp-textarea:focus {
	border-color: var(--ctp-accent);
	box-shadow:   0 0 0 3px rgba(var(--ctp-accent-rgb), .18);
}

.ctp-char-count {
	position:   absolute;
	bottom:     10px;
	right:      12px;
	font-size:  .75rem;
	color:      var(--ctp-text-dim);
	pointer-events: none;
	user-select: none;
}

/* ---------- Stats Bar ---------- */
.ctp-stats-bar {
	display:         flex;
	flex-wrap:       wrap;
	align-items:     center;
	gap:             0;
	background:      var(--ctp-surface);
	border:          1px solid var(--ctp-border);
	border-top:      none;
	border-radius:   0 0 var(--ctp-radius-sm) var(--ctp-radius-sm);
	padding:         10px 16px;
	margin-bottom:   20px;
}

.ctp-stat {
	display:     flex;
	align-items: baseline;
	gap:         4px;
	padding:     2px 8px;
}

.ctp-stat-value {
	font-size:   .95rem;
	font-weight: 700;
	color:       var(--ctp-accent);
	line-height: 1;
}

.ctp-stat-label {
	font-size: .72rem;
	color:     var(--ctp-text-muted);
}

.ctp-stat-divider {
	width:      1px;
	height:     18px;
	background: var(--ctp-border);
	flex-shrink: 0;
}

/* ---------- Sections ---------- */
.ctp-section {
	margin-bottom: 24px;
}

.ctp-section-title {
	display:       flex;
	align-items:   center;
	gap:           8px;
	font-size:     .85rem;
	font-weight:   600;
	color:         var(--ctp-text-muted);
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-bottom: 12px;
}

.ctp-section-title svg {
	width:  16px;
	height: 16px;
	color:  var(--ctp-accent);
}

/* ---------- Conversion Buttons ---------- */
.ctp-btn-group {
	display:   flex;
	flex-wrap: wrap;
	gap:       8px;
}

.ctp-conv-btn {
	display:       inline-flex;
	flex-direction: column;
	align-items:   center;
	gap:           5px;
	padding:       10px 16px;
	background:    var(--ctp-surface);
	border:        1.5px solid var(--ctp-border);
	border-radius: var(--ctp-radius-sm);
	color:         var(--ctp-text);
	font-size:     .8rem;
	font-weight:   500;
	cursor:        pointer;
	transition:    all var(--ctp-transition);
	min-width:     90px;
	text-align:    center;
}

.ctp-conv-btn .ctp-btn-preview {
	font-size:   .75rem;
	color:       var(--ctp-accent);
	font-weight: 600;
	font-family: 'Courier New', monospace;
	letter-spacing: -.01em;
}

.ctp-conv-btn .ctp-btn-label {
	font-size: .75rem;
	color:     var(--ctp-text-muted);
}

.ctp-conv-btn:hover,
.ctp-conv-btn:focus-visible {
	background:   var(--ctp-surface-2);
	border-color: var(--ctp-accent);
	color:        var(--ctp-text);
	outline:      none;
	transform:    translateY(-1px);
	box-shadow:   var(--ctp-shadow-sm);
}

.ctp-conv-btn:focus-visible {
	box-shadow: 0 0 0 3px rgba(var(--ctp-accent-rgb), .4);
}

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

/* Clean buttons have icon + label layout */
.ctp-clean-btn {
	flex-direction: row;
	gap:           8px;
	min-width:     unset;
	padding:       9px 14px;
}

.ctp-clean-btn svg {
	width:  16px;
	height: 16px;
	color:  var(--ctp-accent);
	flex-shrink: 0;
}

.ctp-clean-btn .ctp-btn-label {
	font-size: .8rem;
	color:     var(--ctp-text-muted);
}

.ctp-clean-btn:hover .ctp-btn-label,
.ctp-clean-btn:focus-visible .ctp-btn-label {
	color: var(--ctp-text);
}

/* ---------- SEO Section ---------- */
.ctp-seo-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap:                   12px;
}

.ctp-seo-card {
	background:    var(--ctp-surface);
	border:        1px solid var(--ctp-border);
	border-radius: var(--ctp-radius-sm);
	padding:       14px 16px;
}

.ctp-seo-card-wide {
	grid-column: span 2;
}

.ctp-seo-card-full {
	grid-column: 1 / -1;
}

.ctp-seo-card-title {
	font-size:     .8rem;
	font-weight:   600;
	color:         var(--ctp-text-muted);
	text-transform: uppercase;
	letter-spacing: .07em;
	margin-bottom: 10px;
}

.ctp-slug-output-wrap {
	display:     flex;
	align-items: center;
	gap:         8px;
}

.ctp-slug-output {
	flex:          1;
	padding:       8px 12px;
	background:    var(--ctp-surface-2);
	border:        1px solid var(--ctp-border);
	border-radius: var(--ctp-radius-xs);
	font-size:     .85rem;
	font-family:   'Courier New', monospace;
	color:         var(--ctp-accent);
	word-break:    break-all;
	min-height:    36px;
}

.ctp-slug-copy {
	padding:       8px;
	background:    var(--ctp-surface-2);
	border:        1px solid var(--ctp-border);
	border-radius: var(--ctp-radius-xs);
	color:         var(--ctp-text-muted);
	cursor:        pointer;
	transition:    all var(--ctp-transition);
	flex-shrink:   0;
}

.ctp-slug-copy svg {
	width:   16px;
	height:  16px;
	display: block;
}

.ctp-slug-copy:hover {
	background:   var(--ctp-accent);
	border-color: var(--ctp-accent);
	color:        #fff;
}

.ctp-slug-copy:focus-visible {
	outline:    none;
	box-shadow: 0 0 0 3px rgba(var(--ctp-accent-rgb), .4);
}

.ctp-seo-input,
.ctp-seo-textarea {
	width:         100%;
	padding:       9px 12px;
	background:    var(--ctp-surface-2);
	border:        1.5px solid var(--ctp-border);
	border-radius: var(--ctp-radius-xs);
	color:         var(--ctp-text);
	font-size:     .875rem;
	font-family:   inherit;
	line-height:   1.5;
	resize:        vertical;
	outline:       none;
	transition:    border-color var(--ctp-transition), box-shadow var(--ctp-transition);
	margin-bottom: 8px;
}

.ctp-seo-input::placeholder,
.ctp-seo-textarea::placeholder {
	color: var(--ctp-text-dim);
}

.ctp-seo-input:focus,
.ctp-seo-textarea:focus {
	border-color: var(--ctp-accent);
	box-shadow:   0 0 0 3px rgba(var(--ctp-accent-rgb), .15);
}

.ctp-seo-bar-wrap {
	display:     flex;
	align-items: center;
	gap:         10px;
}

.ctp-seo-bar {
	flex:          1;
	height:        6px;
	background:    var(--ctp-surface-3);
	border-radius: 3px;
	overflow:      hidden;
}

.ctp-seo-bar-fill {
	height:        100%;
	width:         0%;
	border-radius: 3px;
	background:    var(--ctp-green);
	transition:    width .25s ease, background .25s ease;
}

.ctp-seo-bar-fill.ctp-warn {
	background: var(--ctp-yellow);
}

.ctp-seo-bar-fill.ctp-over {
	background: var(--ctp-red);
}

.ctp-seo-counter {
	font-size:  .75rem;
	color:      var(--ctp-text-muted);
	white-space: nowrap;
	min-width:  56px;
	text-align: right;
}

/* ---------- Keyword Table ---------- */
.ctp-keyword-table-wrap {
	overflow-x: auto;
	max-height: 280px;
	overflow-y: auto;
	border-radius: var(--ctp-radius-xs);
}

.ctp-keyword-table {
	width:           100%;
	border-collapse: collapse;
	font-size:       .82rem;
}

.ctp-keyword-table thead th {
	position:    sticky;
	top:         0;
	background:  var(--ctp-surface-3);
	color:       var(--ctp-text-muted);
	font-size:   .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding:     8px 12px;
	text-align:  left;
	border-bottom: 1px solid var(--ctp-border);
	z-index:     1;
}

.ctp-keyword-table tbody tr:nth-child(odd) {
	background: var(--ctp-surface-2);
}

.ctp-keyword-table tbody tr:hover {
	background: var(--ctp-surface-3);
}

.ctp-keyword-table td {
	padding:     7px 12px;
	color:       var(--ctp-text);
	border-bottom: 1px solid var(--ctp-border);
}

.ctp-keyword-table td:first-child {
	font-weight: 500;
}

.ctp-keyword-table td:last-child {
	color: var(--ctp-accent);
	font-weight: 600;
}

.ctp-keyword-empty {
	text-align: center;
	color:      var(--ctp-text-dim) !important;
	font-style: italic;
	padding:    20px !important;
}

/* ---------- Toast ---------- */
.ctp-toast {
	position:      absolute;
	bottom:        20px;
	left:          50%;
	transform:     translateX(-50%) translateY(12px);
	background:    var(--ctp-accent);
	color:         #fff;
	padding:       10px 20px;
	border-radius: var(--ctp-radius-xs);
	font-size:     .85rem;
	font-weight:   500;
	pointer-events: none;
	opacity:       0;
	transition:    opacity .2s ease, transform .2s ease;
	z-index:       100;
	white-space:   nowrap;
	box-shadow:    var(--ctp-shadow-sm);
}

.ctp-toast.ctp-toast-show {
	opacity:   1;
	transform: translateX(-50%) translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	.ctp-wrapper {
		padding: 16px;
	}

	.ctp-header {
		flex-direction: column;
		align-items:    flex-start;
	}

	.ctp-header-actions {
		width: 100%;
	}

	.ctp-btn-icon span {
		display: none;
	}

	.ctp-btn-icon {
		padding: 8px;
	}

	.ctp-stats-bar {
		gap: 0;
	}

	.ctp-stat {
		padding: 2px 5px;
	}

	.ctp-stat-label {
		display: none;
	}

	.ctp-seo-card-wide {
		grid-column: 1 / -1;
	}

	.ctp-conv-btn {
		min-width: 80px;
		padding:   8px 10px;
	}
}

@media (max-width: 480px) {
	.ctp-title {
		font-size: 1rem;
	}

	.ctp-seo-grid {
		grid-template-columns: 1fr;
	}

	.ctp-stats-bar {
		padding: 8px;
	}

	.ctp-stat-divider {
		display: none;
	}

	.ctp-btn-group {
		gap: 6px;
	}
}

/* ---------- AI Badge ---------- */
.ctp-ai-badge {
	display:       inline-block;
	padding:       1px 5px;
	background:    linear-gradient(135deg, var(--ctp-accent), #a78bfa);
	border-radius: 3px;
	font-size:     .65rem;
	font-weight:   700;
	color:         #fff;
	letter-spacing: .04em;
	flex-shrink:   0;
}

.ctp-ai-btn:disabled {
	opacity: .6;
	cursor:  not-allowed;
	transform: none !important;
}

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

.ctp-ai-btn.ctp-loading .ctp-btn-label::after {
	content:      '';
	display:      inline-block;
	width:        10px;
	height:       10px;
	border:       2px solid var(--ctp-accent);
	border-top-color: transparent;
	border-radius: 50%;
	animation:    ctpSpin .7s linear infinite;
	margin-left:  6px;
	vertical-align: middle;
}

/* ---------- SEO Card Header ---------- */
.ctp-seo-card-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             8px;
	margin-bottom:   10px;
}

.ctp-seo-card-header .ctp-seo-card-title {
	margin-bottom: 0;
}

/* ---------- SEO Generate Button ---------- */
.ctp-seo-gen-btn {
	display:       inline-flex;
	align-items:   center;
	gap:           5px;
	padding:       5px 11px;
	background:    linear-gradient(135deg, var(--ctp-accent), #a78bfa);
	border:        none;
	border-radius: var(--ctp-radius-xs);
	color:         #fff;
	font-size:     .75rem;
	font-weight:   600;
	cursor:        pointer;
	white-space:   nowrap;
	transition:    opacity var(--ctp-transition), transform var(--ctp-transition), box-shadow var(--ctp-transition);
	box-shadow:    0 2px 8px rgba(var(--ctp-accent-rgb), .35);
}

.ctp-seo-gen-btn svg {
	width:  13px;
	height: 13px;
	flex-shrink: 0;
}

.ctp-seo-gen-btn:hover {
	opacity:    .88;
	transform:  translateY(-1px);
	box-shadow: 0 4px 14px rgba(var(--ctp-accent-rgb), .45);
}

.ctp-seo-gen-btn:focus-visible {
	outline:    none;
	box-shadow: 0 0 0 3px rgba(var(--ctp-accent-rgb), .4);
}

.ctp-seo-gen-btn:disabled {
	opacity:   .55;
	cursor:    not-allowed;
	transform: none !important;
}

.ctp-seo-gen-btn.ctp-loading {
	pointer-events: none;
}

.ctp-seo-gen-btn.ctp-loading::after {
	content:      '';
	display:      inline-block;
	width:        11px;
	height:       11px;
	border:       2px solid rgba(255,255,255,.5);
	border-top-color: #fff;
	border-radius: 50%;
	animation:    ctpSpin .7s linear infinite;
	margin-left:  4px;
}

/* ---------- SEO Input Wrap ---------- */
.ctp-seo-input-wrap {
	position:      relative;
	margin-bottom: 8px;
}

.ctp-seo-input-wrap .ctp-seo-input,
.ctp-seo-input-wrap .ctp-seo-textarea {
	padding-right: 38px;
	margin-bottom: 0;
}

.ctp-seo-copy-field {
	position:   absolute;
	top:        50%;
	right:      6px;
	transform:  translateY(-50%);
	padding:    5px;
	background: transparent;
	border:     none;
	color:      var(--ctp-text-dim);
	cursor:     pointer;
	border-radius: var(--ctp-radius-xs);
	transition: color var(--ctp-transition), background var(--ctp-transition);
	line-height: 0;
}

.ctp-seo-copy-textarea {
	top:       10px;
	transform: none;
}

.ctp-seo-copy-field svg {
	width:  15px;
	height: 15px;
}

.ctp-seo-copy-field:hover {
	color:      var(--ctp-accent);
	background: var(--ctp-surface-3);
}

.ctp-seo-copy-field:focus-visible {
	outline:    none;
	box-shadow: 0 0 0 2px rgba(var(--ctp-accent-rgb), .4);
}

/* ---------- Scrollbar Styling ---------- */
.ctp-wrapper ::-webkit-scrollbar {
	width:  6px;
	height: 6px;
}

.ctp-wrapper ::-webkit-scrollbar-track {
	background:    var(--ctp-surface-2);
	border-radius: 3px;
}

.ctp-wrapper ::-webkit-scrollbar-thumb {
	background:    var(--ctp-border-hover);
	border-radius: 3px;
}

.ctp-wrapper ::-webkit-scrollbar-thumb:hover {
	background: var(--ctp-accent);
}

/* ---------- Focus Visible Global ---------- */
.ctp-wrapper *:focus-visible {
	outline:    2px solid var(--ctp-accent);
	outline-offset: 2px;
}