/* ==========================================================================
   Terra Viva — Professional Design Layer
   pro.css — Sistema de diseño compartido (SaaS-grade polish)
   ========================================================================== */

/* Tipografía jerarquizada */
body, input, button, select, textarea { font-feature-settings:'cv11','ss01','ss03'; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }

/* Focus states accesibles */
*:focus-visible { outline:2px solid var(--accent, #34d399); outline-offset:2px; border-radius:4px }
button:focus-visible, a:focus-visible { box-shadow:0 0 0 3px rgba(52,211,153,.3) }

/* Scrollbar uniforme y discreta */
*::-webkit-scrollbar { width:10px; height:10px }
*::-webkit-scrollbar-track { background:transparent }
*::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:10px; border:2px solid transparent; background-clip:padding-box }
*::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.15); background-clip:padding-box }

/* Transiciones suaves globales */
button, a, input, select, textarea, .nav-btn, .tab, .card, .metric { transition: all .18s cubic-bezier(.4,0,.2,1) }

/* Hover elevado en cards */
.metric:hover, .card:hover, .info-card:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.25) }

/* === Toast notifications (reemplaza alerts) === */
#toast-container { position:fixed; top:20px; right:20px; z-index:10000; display:flex; flex-direction:column; gap:10px; max-width:400px; pointer-events:none }
.toast { pointer-events:all; background:var(--surface,#111a15); border:1px solid var(--border,#1f352b); border-radius:10px; padding:14px 18px; box-shadow:0 10px 40px rgba(0,0,0,.4); display:flex; align-items:flex-start; gap:12px; animation:toastIn .3s cubic-bezier(.34,1.56,.64,1); min-width:320px; position:relative; overflow:hidden }
.toast.closing { animation:toastOut .25s ease-in forwards }
.toast::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px }
.toast.success::before { background:#34d399 }
.toast.error::before { background:#f87171 }
.toast.warn::before { background:#fbbf24 }
.toast.info::before { background:#60a5fa }
.toast .toast-icon { flex-shrink:0; width:20px; height:20px; margin-top:1px }
.toast .toast-content { flex:1; font-size:13px; color:var(--text,#e8ece9); line-height:1.4 }
.toast .toast-title { font-weight:700; margin-bottom:2px }
.toast .toast-close { background:none; border:none; color:var(--text3,#5d7a6b); cursor:pointer; font-size:18px; line-height:1; padding:0 0 0 8px; align-self:flex-start }
.toast .toast-close:hover { color:var(--text,#e8ece9) }
@keyframes toastIn { from{transform:translateX(120%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes toastOut { to{transform:translateX(120%);opacity:0} }

/* === Skeleton loaders === */
.skeleton { background: linear-gradient(90deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.03) 100%); background-size:200% 100%; animation:skeletonSlide 1.4s ease-in-out infinite; border-radius:6px; color:transparent!important; user-select:none }
@keyframes skeletonSlide { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skeleton-line { height:12px; border-radius:4px; margin:4px 0 }
.skeleton-line.w-60 { width:60% } .skeleton-line.w-80 { width:80% } .skeleton-line.w-40 { width:40% }

/* === Confirm modal profesional === */
.pro-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); z-index:9998; display:none; align-items:center; justify-content:center; animation:fadeIn .18s ease }
.pro-modal-backdrop.open { display:flex }
.pro-modal { background:var(--surface,#111a15); border:1px solid var(--border,#1f352b); border-radius:14px; max-width:440px; width:90%; padding:28px; box-shadow:0 20px 60px rgba(0,0,0,.5); animation:modalPop .25s cubic-bezier(.34,1.56,.64,1) }
.pro-modal h3 { margin:0 0 8px; font-size:17px; color:var(--text,#e8ece9) }
.pro-modal p { margin:0 0 20px; font-size:13px; color:var(--text2,#8fa89a); line-height:1.5 }
.pro-modal-actions { display:flex; gap:10px; justify-content:flex-end }
.pro-btn { padding:10px 20px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; border:none; font-family:inherit; transition:all .15s }
.pro-btn-primary { background:var(--accent,#34d399); color:#0a0f0d }
.pro-btn-primary:hover { background:#2fc087; transform:translateY(-1px) }
.pro-btn-danger { background:var(--danger,#f87171); color:#fff }
.pro-btn-ghost { background:transparent; color:var(--text2,#8fa89a); border:1px solid var(--border,#1f352b) }
.pro-btn-ghost:hover { background:var(--surface2,#182420); color:var(--text,#e8ece9) }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes modalPop { from{opacity:0;transform:scale(.9) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }

/* === Empty states === */
.empty-state { text-align:center; padding:60px 20px; color:var(--text3,#5d7a6b) }
.empty-state-icon { font-size:48px; margin-bottom:16px; opacity:.4 }
.empty-state h4 { font-size:15px; color:var(--text2,#8fa89a); margin:0 0 6px }
.empty-state p { font-size:12px; margin:0 }

/* === Tooltips globales === */
[data-tooltip] { position:relative }
[data-tooltip]::after { content:attr(data-tooltip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%) translateY(4px); background:rgba(0,0,0,.92); color:#fff; font-size:11px; padding:5px 10px; border-radius:5px; white-space:nowrap; opacity:0; pointer-events:none; transition:all .2s; z-index:9999 }
[data-tooltip]:hover::after { opacity:1; transform:translateX(-50%) translateY(0) }

/* === Progress bar top (navigation) === */
#pro-progress { position:fixed; top:0; left:0; right:0; height:2.5px; z-index:9999; background:transparent; pointer-events:none }
#pro-progress::after { content:''; display:block; height:100%; width:0; background:linear-gradient(90deg,#34d399,#60a5fa); box-shadow:0 0 10px rgba(52,211,153,.5); transition:width .3s ease }
#pro-progress.loading::after { animation:progressLoading 2s ease-in-out infinite }
@keyframes progressLoading { 0%{width:0;margin-left:0} 50%{width:70%} 100%{width:100%;margin-left:100%} }

/* === Keyboard shortcut hint === */
.kbd { display:inline-block; padding:1px 6px; font-family:monospace; font-size:10px; background:var(--surface2,#182420); border:1px solid var(--border,#1f352b); border-radius:3px; color:var(--text3,#5d7a6b); margin:0 2px }

/* === Command palette (Ctrl+K) === */
#cmdk-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); z-index:9998; display:none; align-items:flex-start; justify-content:center; padding-top:15vh; animation:fadeIn .15s ease }
#cmdk-backdrop.open { display:flex }
#cmdk { background:var(--surface,#111a15); border:1px solid var(--border,#1f352b); border-radius:14px; width:90%; max-width:600px; overflow:hidden; box-shadow:0 25px 80px rgba(0,0,0,.6); animation:modalPop .2s cubic-bezier(.34,1.56,.64,1) }
#cmdk-input { width:100%; padding:18px 22px; background:transparent; border:none; color:var(--text,#e8ece9); font-size:15px; outline:none; font-family:inherit; border-bottom:1px solid var(--border,#1f352b) }
#cmdk-results { max-height:400px; overflow-y:auto; padding:8px }
.cmdk-item { padding:10px 14px; display:flex; align-items:center; gap:12px; border-radius:8px; cursor:pointer; font-size:13px }
.cmdk-item.active { background:var(--surface2,#182420) }
.cmdk-item .cmdk-icon { font-size:16px; opacity:.7 }
.cmdk-item .cmdk-label { flex:1; color:var(--text,#e8ece9) }
.cmdk-item .cmdk-shortcut { color:var(--text3,#5d7a6b); font-size:10px }
.cmdk-footer { padding:10px 18px; border-top:1px solid var(--border,#1f352b); background:var(--surface2,#182420); font-size:10px; color:var(--text3,#5d7a6b); display:flex; gap:14px; align-items:center }

/* === Print styles profesionales === */
@media print {
  body { background:#fff; color:#000 }
  .side, .mob-nav, .hdr-right, .btn-logout, #toast-container, .pro-modal-backdrop, #portal-iframe-header, #adminSwitcher { display:none!important }
  .cnt { overflow:visible!important; padding:0!important }
}

/* === Quality-of-life === */
.dim { color: var(--text3,#5d7a6b) }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mono { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; font-variant-numeric: tabular-nums }

/* Mejor appearance de inputs */
input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="password"], select, textarea {
  -webkit-appearance:none; appearance:none;
}

/* Animación de aparición para elementos nuevos */
.fade-in-up { animation:fadeInUp .4s cubic-bezier(.4,0,.2,1) }
@keyframes fadeInUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* Badge mejorado */
.badge-pro { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:5px; font-size:10px; font-weight:700; letter-spacing:.3px; text-transform:uppercase }
.badge-pro.ok { background:rgba(52,211,153,.12); color:#34d399 }
.badge-pro.warn { background:rgba(251,191,36,.12); color:#fbbf24 }
.badge-pro.err { background:rgba(248,113,113,.12); color:#f87171 }
.badge-pro.info { background:rgba(96,165,250,.12); color:#60a5fa }