/**
 * EA Calc Addon — CSS for plan bar, AI panel, paywall modal, comparator, share buttons.
 * v1.3.0
 *
 * @package EA_Ampacity_NEC
 */

/* ════════════════════════════════════════════════════════════════
   PLAN BAR — badge del plan + cuota restante
   Se inyecta entre el header y el body del calculador.
   ════════════════════════════════════════════════════════════════ */

.eaan-root .eaan-plan-bar{
	display:flex;align-items:center;gap:10px;flex-wrap:wrap;
	padding:9px 16px;
	background:#f8fafc;
	border-bottom:1px solid #e2e8f0;
	font-size:12.5px;color:#475569;
	line-height:1.4;
}
.eaan-root .eaan-plan-loading{color:#94a3b8;font-style:italic}
.eaan-root .eaan-plan-badge{
	padding:2px 10px;border-radius:11px;
	font-size:10px;font-weight:700;letter-spacing:.4px;
	text-transform:uppercase;white-space:nowrap;
	display:inline-flex;align-items:center;
}
.eaan-root .eaan-plan-badge-annual{
	background:linear-gradient(135deg,#fef3c7,#fde68a);
	color:#92400e;border:1px solid #fcd34d;
}
.eaan-root .eaan-plan-badge-monthly{
	background:rgba(99,102,241,.12);
	color:#4338ca;border:1px solid rgba(99,102,241,.25);
}
.eaan-root .eaan-plan-badge-free{
	background:rgba(16,185,129,.10);
	color:#065f46;border:1px solid rgba(16,185,129,.22);
}
.eaan-root .eaan-plan-badge-visitor{
	background:rgba(100,116,139,.10);
	color:#475569;border:1px solid rgba(100,116,139,.22);
}
.eaan-root .eaan-plan-txt{
	flex:1;min-width:140px;color:#475569;
}
.eaan-root .eaan-plan-txt.eaan-plan-low{
	color:#b91c1c;font-weight:600;
}
.eaan-root .eaan-plan-link{
	color:#d97706;font-weight:600;
	text-decoration:none;font-size:12.5px;
	white-space:nowrap;
	border-bottom:1px dashed transparent;
	transition:border-color .15s;
}
.eaan-root .eaan-plan-link:hover{
	color:#b45309;border-bottom-color:#d97706;
}

@media (max-width:480px){
	.eaan-root .eaan-plan-bar{font-size:11.5px;padding:8px 12px;gap:8px}
	.eaan-root .eaan-plan-txt{min-width:100%}
}

/* Dark theme support — match calculator's data-theme="dark" */
.eaan-root[data-theme="dark"] .eaan-plan-bar{
	background:#1e293b;border-bottom-color:#334155;color:#cbd5e1;
}
.eaan-root[data-theme="dark"] .eaan-plan-txt{color:#cbd5e1}
.eaan-root[data-theme="dark"] .eaan-plan-txt.eaan-plan-low{color:#fca5a5}

/* ════════════════════════════════════════════════════════════════
   ACTION BAR EXTRA — IA, PDF, Compare, Share
   ════════════════════════════════════════════════════════════════ */

.eaan-root .eaan-actions-extra{
	display:flex;flex-wrap:wrap;gap:6px;
	margin-left:auto;
}
.eaan-root .eaan-btn-ai,
.eaan-root .eaan-btn-pro,
.eaan-root .eaan-btn-share{
	display:inline-flex;align-items:center;gap:4px;
	padding:6px 12px;border-radius:6px;
	font-size:13px;font-weight:600;
	border:1px solid;cursor:pointer;
	transition:all .15s;white-space:nowrap;
	font-family:inherit;
}
.eaan-root .eaan-btn-ai{
	background:linear-gradient(135deg,#eef2ff,#e0e7ff);
	color:#4338ca;border-color:#c7d2fe;
}
.eaan-root .eaan-btn-ai:hover{
	background:linear-gradient(135deg,#e0e7ff,#c7d2fe);
	transform:translateY(-1px);
}
.eaan-root .eaan-btn-pro{
	background:linear-gradient(135deg,#fffbeb,#fef3c7);
	color:#92400e;border-color:#fde68a;
}
.eaan-root .eaan-btn-pro:hover{
	background:linear-gradient(135deg,#fef3c7,#fde68a);
	transform:translateY(-1px);
}
.eaan-root .eaan-btn-share{
	background:#f8fafc;color:#475569;border-color:#e2e8f0;
}
.eaan-root .eaan-btn-share:hover{
	background:#e2e8f0;color:#0f172a;
}

/* ════════════════════════════════════════════════════════════════
   AI PANEL
   ════════════════════════════════════════════════════════════════ */

.eaan-root .eaan-ai-panel{
	margin-top:18px;background:#fff;
	border:1px solid #e2e8f0;border-radius:12px;
	overflow:hidden;
	box-shadow:0 2px 8px rgba(15,23,42,.04);
}
.eaan-root .eaan-ai-header{
	display:flex;align-items:center;gap:10px;
	padding:12px 16px;
	background:linear-gradient(135deg,#eef2ff,#e0e7ff);
	border-bottom:1px solid #c7d2fe;
}
.eaan-root .eaan-ai-title{
	font-weight:700;color:#3730a3;font-size:15px;
}
.eaan-root .eaan-ai-model{
	color:#6366f1;font-size:12px;font-family:monospace;
	margin-left:6px;
}
.eaan-root .eaan-ai-close{
	margin-left:auto;
	background:rgba(255,255,255,.6);border:none;
	width:28px;height:28px;border-radius:6px;cursor:pointer;
	font-size:14px;color:#4338ca;
	display:flex;align-items:center;justify-content:center;
}
.eaan-root .eaan-ai-close:hover{background:#fff;color:#1e1b4b}
.eaan-root .eaan-ai-body{
	padding:18px 20px;
	font-size:14px;line-height:1.65;color:#1e293b;
	max-height:600px;overflow-y:auto;
}
.eaan-root .eaan-ai-body p{margin:0 0 10px}
.eaan-root .eaan-ai-body p:last-child{margin-bottom:0}
.eaan-root .eaan-ai-body h3{
	font-size:16px;font-weight:700;color:#0f172a;
	margin:18px 0 8px;padding-bottom:4px;
	border-bottom:1px solid #e2e8f0;
}
.eaan-root .eaan-ai-body h4{
	font-size:14px;font-weight:700;color:#475569;
	margin:14px 0 6px;
}
.eaan-root .eaan-ai-body ul,.eaan-root .eaan-ai-body ol{
	margin:6px 0 12px;padding-left:22px;
}
.eaan-root .eaan-ai-body li{margin:3px 0}
.eaan-root .eaan-ai-body strong{color:#0f172a;font-weight:700}
.eaan-root .eaan-ai-body code{
	background:#f1f5f9;color:#1e40af;
	padding:2px 6px;border-radius:4px;
	font-family:'JetBrains Mono',monospace;font-size:12.5px;
}
.eaan-root .eaan-ai-body pre{
	background:#1e293b;color:#e2e8f0;
	padding:12px 16px;border-radius:8px;
	font-size:12.5px;overflow-x:auto;margin:10px 0;
}

.eaan-root .eaan-ai-table{
	width:100%;border-collapse:collapse;
	margin:10px 0;font-size:13px;
	border-radius:8px;overflow:hidden;
	box-shadow:0 1px 3px rgba(15,23,42,.06);
}
.eaan-root .eaan-ai-table th{
	background:#0f172a;color:#fff;
	padding:8px 12px;text-align:left;font-weight:700;
	font-size:12.5px;
}
.eaan-root .eaan-ai-table td{
	padding:7px 12px;border-bottom:1px solid #e2e8f0;
	color:#1e293b;
}
.eaan-root .eaan-ai-table tr:nth-child(even) td{background:#f8fafc}
.eaan-root .eaan-ai-table tr:last-child td{border-bottom:none}

.eaan-root .eaan-ai-loader{
	display:flex;align-items:center;gap:12px;
	color:#6366f1;font-size:14px;font-weight:600;
}
.eaan-root .eaan-ai-spinner{
	width:20px;height:20px;
	border:2px solid #e0e7ff;border-top-color:#6366f1;
	border-radius:50%;
	animation:eaan-spin 0.8s linear infinite;
}
@keyframes eaan-spin{to{transform:rotate(360deg)}}

.eaan-root .eaan-ai-error{
	background:#fef2f2;color:#991b1b;
	padding:12px 16px;border-radius:8px;
	border-left:4px solid #ef4444;
	font-size:14px;
}
.eaan-root .eaan-ai-hint{
	color:#64748b;font-size:14px;font-style:italic;margin:0;
}
.eaan-root .eaan-ai-question-echo{
	background:#f0f9ff;color:#075985;
	padding:10px 14px;border-radius:8px;
	margin-bottom:14px;font-size:13.5px;
	border-left:3px solid #0284c7;
}

.eaan-root .eaan-ai-question{
	display:flex;gap:10px;align-items:flex-start;
	padding:14px 16px;
	background:#f8fafc;border-top:1px solid #e2e8f0;
}
.eaan-root .eaan-ai-question textarea{
	flex:1;min-height:42px;
	padding:10px 12px;border:1px solid #e2e8f0;
	border-radius:8px;font-size:14px;
	font-family:inherit;resize:vertical;
	background:#fff;color:#0f172a;
}
.eaan-root .eaan-ai-question textarea:focus{
	outline:none;border-color:#6366f1;
	box-shadow:0 0 0 3px rgba(99,102,241,.15);
}
.eaan-root .eaan-ai-question .eaan-btn-primary{
	background:linear-gradient(135deg,#6366f1,#4f46e5)!important;
	color:#fff!important;border:none;
	padding:10px 20px;border-radius:8px;
	font-weight:700;cursor:pointer;font-size:14px;
	white-space:nowrap;
}
.eaan-root .eaan-ai-question .eaan-btn-primary:hover{
	background:linear-gradient(135deg,#4f46e5,#4338ca)!important;
}

/* ════════════════════════════════════════════════════════════════
   COMPARADOR
   ════════════════════════════════════════════════════════════════ */

.eaan-root .eaan-compare-panel{
	margin-top:18px;background:#fafafa;
	border:1px solid #e2e8f0;border-radius:12px;
	padding:16px 20px;
}
.eaan-root .eaan-compare-header{
	display:flex;align-items:center;gap:10px;
	margin-bottom:14px;
	font-size:16px;font-weight:700;color:#0f172a;
}
.eaan-root .eaan-compare-header .eaan-ai-close{margin-left:auto}
.eaan-root .eaan-compare-controls{
	display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;
	background:#fff;border:1px solid #e2e8f0;border-radius:8px;
	padding:12px 14px;margin-bottom:14px;
}
.eaan-root .eaan-compare-controls label{
	display:flex;flex-direction:column;gap:4px;
	font-size:12px;color:#475569;flex:1;min-width:140px;font-weight:600;
}
.eaan-root .eaan-compare-controls select{
	padding:7px 9px;border:1px solid #e2e8f0;border-radius:6px;
	font-size:13.5px;background:#fff;color:#0f172a;font-family:inherit;
}
.eaan-root .eaan-compare-controls .eaan-btn-primary{
	background:linear-gradient(135deg,#f59e0b,#d97706)!important;
	color:#fff!important;border:none;
	padding:9px 18px;border-radius:7px;
	font-weight:700;cursor:pointer;font-size:13.5px;white-space:nowrap;
}
.eaan-root .eaan-compare-grid{
	display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.eaan-root .eaan-compare-col{
	background:#fff;border:1px solid #e2e8f0;border-radius:8px;
	padding:14px 16px;
}
.eaan-root [data-compare-col="A"]{border-left:4px solid #94a3b8}
.eaan-root [data-compare-col="B"]{border-left:4px solid #f59e0b}
.eaan-root .eaan-compare-col-title{
	font-weight:700;color:#0f172a;font-size:13px;
	margin-bottom:10px;letter-spacing:.3px;
}
.eaan-root .eaan-compare-row{
	display:flex;justify-content:space-between;
	padding:5px 0;border-bottom:1px dashed #f1f5f9;
	font-size:13px;
}
.eaan-root .eaan-compare-row:last-child{border-bottom:none}
.eaan-root .eaan-compare-row span{color:#64748b}
.eaan-root .eaan-compare-row strong{color:#0f172a;font-weight:700}
.eaan-root .eaan-compare-empty{
	color:#94a3b8;font-size:13px;font-style:italic;
	padding:14px 0;text-align:center;
}
.eaan-root .eaan-compare-delta{
	margin-top:12px;padding:10px 14px;
	background:linear-gradient(135deg,#f0fdf4,#dcfce7);
	border-left:4px solid #10b981;
	border-radius:6px;font-size:13.5px;color:#14532d;
}

@media(max-width:640px){
	.eaan-root .eaan-compare-grid{grid-template-columns:1fr}
}

/* ════════════════════════════════════════════════════════════════
   PAYWALL MODAL
   ════════════════════════════════════════════════════════════════ */

.eaan-paywall-modal{
	position:fixed;inset:0;z-index:99999;
	display:flex;align-items:center;justify-content:center;
	opacity:0;transition:opacity .2s;
	font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
.eaan-paywall-modal.eaan-paywall-open{opacity:1}
.eaan-paywall-backdrop{
	position:absolute;inset:0;
	background:rgba(15,23,42,.6);cursor:pointer;
}
.eaan-paywall-dialog{
	position:relative;background:#fff;
	max-width:440px;width:90%;
	padding:32px 28px 24px;border-radius:14px;
	box-shadow:0 20px 60px rgba(0,0,0,.3);
	text-align:center;
	transform:scale(.95);transition:transform .2s;
}
.eaan-paywall-modal.eaan-paywall-open .eaan-paywall-dialog{transform:scale(1)}
.eaan-paywall-close{
	position:absolute;top:10px;right:14px;
	background:none;border:none;font-size:18px;cursor:pointer;
	color:#94a3b8;width:32px;height:32px;
	display:flex;align-items:center;justify-content:center;
	border-radius:6px;
}
.eaan-paywall-close:hover{background:#f1f5f9;color:#475569}
.eaan-paywall-icon{font-size:48px;margin-bottom:12px;line-height:1}
.eaan-paywall-title{
	color:#0f172a!important;margin:0 0 10px!important;
	font-size:20px!important;font-weight:700!important;
}
.eaan-paywall-body{
	color:#475569!important;margin:0 0 22px!important;
	font-size:15px!important;line-height:1.55!important;
}
.eaan-paywall-actions{
	display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
}
.eaan-paywall-cta{
	background:linear-gradient(135deg,#f59e0b,#d97706);
	color:#fff!important;text-decoration:none!important;
	padding:11px 26px;border-radius:8px;
	font-weight:700;font-size:14px;
	box-shadow:0 4px 12px rgba(245,158,11,.35);
	transition:transform .15s;
}
.eaan-paywall-cta:hover{transform:translateY(-1px)}

.eaan-paywall-modal .eaan-btn-secondary{
	background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;
	padding:11px 22px;border-radius:8px;
	font-weight:600;font-size:14px;cursor:pointer;
	font-family:inherit;
}
.eaan-paywall-modal .eaan-btn-secondary:hover{
	background:#e2e8f0;color:#0f172a;
}