/* ArkMail — estilos oscuros con mejoras visuales */
/* variables y tema */
:root{
  --bg: #0b0d12;
  --bg-2: #0d1118;
  --panel: rgba(16,21,31,.55);
  --muted: #9aa4b2;
  --text: #e6ebf2;
  --accent: #7aa2ff;
  --accent-2: #8b5cf6;
  --ok: #22c55e;
  --danger: #ef4444;
  --border: #1f2937;
  --ring: rgba(122,162,255,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  /* hover/active */
  --msg-hover: #0f1624;
  --msg-active: #0f1a2b;
  --msg-border-hover: #1b2230;
  --msg-border-active: #28324a;
  /* skeletons (dark) */
  --sk1: #0e1522;
  --sk2: #121a2b;
  /* Liquid Glass tokens */
  --glass-blur: 28px;
  --glass-sat: 1.35;
  --glass-ct: 1.06;
  --glass-radius: 16px;
  --glass-tint-dark: rgba(16,21,31,0.68);
  --glass-tint-light: rgba(255,255,255,0.16);
  --glass-edge-dark: rgba(0,0,0,0.35);
  --glass-edge-light: rgba(255,255,255,0.35);
  --glass-highlight: rgba(255,255,255,0.04);
  --glass-ink-shadow: rgba(0,0,0,0.35);
}
[data-theme="light"]{
  --bg:#f5f6fa;
  --bg-2:#e5e9f2;
  --panel:rgba(255,255,255,.6);
  --muted:#4b5563;
  --text:#1b1f23;
  --accent:#2563eb;
  --accent-2:#7c3aed;
  --ok:#16a34a;
  --danger:#dc2626;
  --border:rgba(0,0,0,.1);
  --ring:rgba(37,99,235,.35);
  --shadow:0 10px 30px rgba(0,0,0,.15);
  --msg-hover: rgba(255,255,255,.75);
  --msg-active: rgba(255,255,255,.9);
  --msg-border-hover: rgba(0,0,0,.06);
  --msg-border-active: rgba(0,0,0,.12);
  /* skeletons (light) */
  --sk1: rgba(255,255,255,.6);
  --sk2: rgba(255,255,255,.85);
  /* Liquid Glass overrides */
  --glass-tint-dark: rgba(255,255,255,0.62);
  --glass-tint-light: rgba(255,255,255,0.65);
  --glass-edge-dark: rgba(0,0,0,0.18);
  --glass-edge-light: rgba(255,255,255,0.8);
  --glass-highlight: rgba(255,255,255,0.10);
  --glass-ink-shadow: rgba(255,255,255,0);
}
*{ box-sizing: border-box }
html,body{ height:100%; overscroll-behavior-y: none }
html{ scroll-behavior:smooth }
body{
  margin:0; font: 15px/1.5 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 80% -10%, rgba(122,162,255,.08), transparent 60%),
              radial-gradient(1200px 600px at -10% 20%, rgba(139,92,246,.08), transparent 60%),
              var(--bg);
  background-attachment: fixed; /* fondo estable */
  color: var(--text);
  animation:bgmove 30s ease-in-out infinite alternate;
}
@keyframes bgmove{from{background-position:0 0,0 0,var(--bg);}to{background-position:200px -120px,-200px 80px,var(--bg);}}

/* Liquid Glass utility */
.glass-lg{ position:relative; background: linear-gradient( to bottom right, var(--glass-tint-dark), var(--glass-tint-light) ); border: 1px solid var(--border); border-radius: var(--glass-radius); overflow:hidden; box-shadow: 0 4px 18px rgba(0,0,0,.25); contain: paint; will-change: backdrop-filter; }
.glass-lg::before{ content:""; position:absolute; inset:0; background:
  linear-gradient( 180deg, transparent 0%, var(--glass-highlight) 40%, transparent 100% ),
  conic-gradient( from 200deg at 20% -10%, rgba(255,255,255,0.10), transparent 25%, transparent 75%, rgba(255,255,255,0.06) 100% );
  mix-blend-mode: soft-light; pointer-events:none }
.glass-lg::after{ content:""; position:absolute; inset:-1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0.03'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:.03; mix-blend-mode: overlay; pointer-events:none }
.glass-lg{ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) contrast(var(--glass-ct)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) contrast(var(--glass-ct)); }
.glass-lg--bar{ border-radius: 16px; }
.glass-lg--panel{ }
.glass-lg--btn{ box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.glass-lg--btn:hover{ filter: brightness(1.03) }
.glass-lg--btn:active{ transform: translateY(1px) }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .glass-lg{ background: linear-gradient( to bottom right, var(--glass-tint-dark), var(--glass-tint-light) ); box-shadow: 0 6px 20px rgba(0,0,0,.28); }
  .glass-lg::before{ opacity:.06 }
  .glass-lg::after{ display:none }
}

.banner{ position:sticky; top:0; z-index:50; text-align:center; padding:.45rem .75rem; background:var(--panel); backdrop-filter: blur(24px) saturate(180%) contrast(105%); border-bottom:1px solid var(--border); color:var(--text); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06) }
.container{ display:block; width:min(1200px, 94vw); margin-left:auto !important; margin-right:auto !important }
.topbar{ position: sticky; top:0; z-index: 30; background: var(--panel); backdrop-filter: blur(24px) saturate(180%) contrast(105%); border-bottom: 1px solid var(--border); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06) }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px clamp(12px, 3vw, 24px) }
.brand{ display:flex; gap:12px; align-items:center }
.logo{ display:grid; place-items:center; width:36px; height:36px; background: var(--panel); border:1px solid var(--border); border-radius:10px; box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06) }
.logo-img{ width:24px; height:24px; object-fit: contain; display:block }
.brand-title{ margin:0; font-weight:700; letter-spacing:.3px }
.brand-sub{ margin:0; font-size:12px; color:var(--muted) }
.top-actions{ display:flex; align-items:center; gap:12px }
.gh{ color:var(--muted); text-decoration:none; border:1px solid var(--border); padding:.45rem .7rem; border-radius:10px; transition: border-color .2s }
.gh:hover{ border-color: var(--accent) }
.sound-toggle, .theme-toggle{ display:flex; gap:8px; align-items:center; color:var(--muted) }
.sound-toggle input, .theme-toggle input{ accent-color: var(--accent) }
.controls{ display:grid; grid-template-columns: clamp(360px, 55vw, 640px) auto; gap:12px; align-items:end; padding: 16px 0 10px }
.input-wrap{ position:relative; display:flex; align-items:center }
.input{ width:100%; padding: .9rem 10.5rem .9rem 1rem; border-radius:14px; border:1px solid var(--border); background: var(--panel); color:var(--text); outline: none; box-shadow: inset 0 0 0 0 var(--ring); transition: box-shadow .2s, border-color .2s }
.input:focus{ border-color:var(--accent); box-shadow: 0 0 0 6px var(--ring) }
.suffix{ position:absolute; right:12px; color:var(--muted); font-size:.95rem; pointer-events:none }
.control-buttons{ display:flex; gap:8px; align-items:center; justify-self:end }
.btn{ appearance:none; border:none; cursor:pointer; border-radius:12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; font-weight:700; padding:.95rem 1.15rem; letter-spacing:.3px; box-shadow: var(--shadow); transition: transform .06s ease, filter .2s ease; position:relative; overflow:hidden }
.btn:active{ transform: translateY(1px) }
.btn[disabled]{ opacity:.6; cursor:not-allowed }
.icon-btn{ border:1px solid var(--border); background:var(--panel); color:var(--text); border-radius:10px; padding:.55rem .7rem; cursor:pointer; transition: border-color .2s, transform .08s; position:relative; overflow:hidden; min-width:44px; min-height:44px }
.icon-btn:hover{ border-color: var(--accent) }
.icon-btn:active{ transform: translateY(1px) }
.icon-btn.danger:hover{ border-color: var(--danger); color:#ff9aa9 }
.select{ border:1px solid var(--border); background:var(--panel); color:var(--text); border-radius:10px; padding:.6rem .7rem }
.filters{ display:grid; grid-template-columns: auto 1fr auto auto; gap:10px; margin-top:10px; align-items:center }
.filters-left{ display:flex; align-items:center; gap:14px }
.filters-left .status{ margin:0 }
.filters-left .chips{ margin:0; flex-wrap: nowrap }
.search{ padding:.7rem 1rem }
.status{ display:flex; gap:12px; align-items:center; justify-self:end }
.badge{ display:inline-flex; align-items:center; gap:.5ch; padding:.35rem .65rem; border-radius:999px; background: var(--panel); border:1px solid var(--border); color: var(--text); font-weight:600; white-space: nowrap }
.status .muted{ max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
/* evitar que el buscador encoja demasiado en escritorio */
.filters .search{ min-width: 260px }
.muted{ color:var(--muted) }
/* Chips de filtros */
.chips{ grid-column: 1 / -1; display:flex; gap:8px; flex-wrap:wrap }
.chip{ background: transparent; color: var(--text); border:1px solid var(--border); border-radius:999px; padding:.4rem .7rem; cursor:pointer; white-space: nowrap }
.chip.is-active{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border-color: transparent }

.layout{ display:grid; grid-template-columns: 360px 8px 1fr; gap:20px; margin: 8px 0 0; min-height: min(70vh, 900px) }
.list-pane, .detail-pane{ background: var(--panel); backdrop-filter: blur(24px) saturate(180%) contrast(105%); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06) }
.pane-head{ display:flex; align-items:center; justify-content:space-between; padding:.85rem 1rem; border-bottom:1px solid var(--border); background: var(--panel); backdrop-filter: blur(24px) saturate(180%) contrast(105%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06) }
.pane-title{ margin:0; font-size:1rem }
.pane-resizer{ width:8px; cursor: col-resize; border-radius:8px; background: transparent }
.pane-resizer::after{ content:""; display:block; width:2px; height:60%; margin: 20% auto; background: var(--border); border-radius:2px; opacity:.6 }
.list{ height: calc(70vh - 70px); overflow:auto; overflow-x:hidden; overscroll-behavior: contain }
.detail{ height: calc(70vh - 0px); overflow:auto; padding: 0 1rem 1.25rem }
.detail-head{ display:none; align-items:center; gap:8px; padding:.6rem .6rem; border-bottom:1px solid var(--border) }
.empty{ display:grid; place-items:center; gap:.35rem; height:100%; padding: 1rem }
.empty-hero{ font-size:40px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.35)) }
.msg{ padding:.75rem .85rem; border-radius:12px; border:1px solid transparent; background:transparent; margin:.45rem; transition: background .2s, border-color .2s, transform .15s ease; cursor:pointer; word-break: break-word; overflow-wrap:anywhere; touch-action: pan-y }
.msg:hover{ background: var(--msg-hover); border-color: var(--msg-border-hover) }
.msg.active{ background: var(--msg-active); border-color: var(--msg-border-active) }
.msg .row{ display:flex; justify-content:space-between; gap:12px; align-items:baseline }
.msg strong{ font-size:.98rem; text-shadow: 0 1px 0 rgba(0,0,0,.15) }
.msg .muted{ font-size:.85rem }
.msg .preview{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.msg.new{ animation: flash .9s ease 1 }
.msg .dot{ display:inline-block; width:.5rem; height:.5rem; border-radius:999px; background:#7aa2ff; margin-right:.5rem }
.msg .star{ margin-left:.5rem; color:#ffd166; opacity:.9; transition: transform .2s ease }
.msg .star:active{ transform: scale(.9) rotate(-10deg) }
.msg .star:hover{ transform: rotate(20deg) scale(1.15) }
/* swipe hint */
.msg::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:12px; opacity:0; transition:opacity .2s }
.msg.swipe-left::after{ background: linear-gradient(90deg, rgba(239,68,68,.12), transparent); opacity:1 }
.msg.swipe-right::after{ background: linear-gradient(270deg, rgba(37,99,235,.12), transparent); opacity:1 }
@keyframes flash{ 0%{background:#13233c} 100%{background:transparent} }
.detail h4{ margin:.6rem 1rem .35rem 1rem }
.detail article{ margin-top: .75rem; line-height:1.65; word-break: break-word; overflow-wrap: anywhere; animation: fadein .36s ease both }
.detail pre{ white-space: pre-wrap; word-break: break-word; background:#0c1118; padding:1rem; border-radius:12px; border:1px solid var(--border) }
.footer{ position:fixed; left:0; right:0; bottom:0; padding: 12px 0; text-align:center; background: var(--panel); backdrop-filter: blur(12px) saturate(180%); border-top: 1px solid var(--border) }
.fade-in{ animation: fadein .36s ease both }
@keyframes fadein{ from{ opacity:0; transform: translateY(4px) } to{ opacity:1; transform:none } }
@keyframes fadeout{ to{ opacity:0; transform: translateY(4px) } }
/* Skeletons tematizados */
.skeleton{ background: linear-gradient(90deg, var(--sk1) 25%, var(--sk2) 37%, var(--sk1) 63%); background-size: 400% 100%; animation: shimmer 1.2s ease-in-out infinite }
@keyframes shimmer{ 0%{ background-position: 100% 0 } 100%{ background-position: 0 0 } }
.msg.skeleton{ height:68px }
.detail .s1{ height:22px; width:60%; border-radius:8px; margin:.4rem 1rem }
.detail .s2{ height:16px; width:90%; border-radius:8px; margin:.4rem 1rem }
/* Toasts */
.toasts{ position: fixed; bottom: 140px; right: 16px; display:flex; flex-direction:column; gap:10px; z-index:100 }
.toast{ background:#101725; color:#d6e1ff; border:1px solid #243047; padding:.6rem .8rem; border-radius:10px; box-shadow: var(--shadow); animation: fadein .3s ease, fadeout .4s ease 2.3s forwards }
/* Floating action bar */
.fab{ position:fixed; bottom:96px; left:0; right:0; display:none; justify-content:center; gap:12px; z-index:90; backdrop-filter: blur(12px) saturate(180%) }
.fab-btn{ border:1px solid var(--border); background:var(--panel); color:#fff; border-radius:999px; padding:.75rem .9rem; box-shadow: var(--shadow); position:relative; overflow:hidden }
/* Bottom bar (móvil) - contenedor transparente y compacto */
.bottombar{ position:fixed; left:0; right:0; bottom:56px; display:flex; justify-content:center; align-items:center; gap:14px; padding:0; z-index:95; background: transparent; pointer-events: none }
.bottombar[hidden]{ display:none !important }
.bottombar .icon-btn{ flex:0 0 auto; pointer-events: auto }

/* Botón circular compacto para bottom bar */
.btn-circle{ width:52px; height:52px; padding:0; border-radius:999px; display:grid; place-items:center; font-size:20px; line-height:1; border:1px solid var(--border); background: transparent; box-shadow:none }
.btn-circle.glass-lg{ box-shadow: 0 8px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) }
.btn-circle:hover{ border-color: var(--accent) }
.btn-circle:active{ transform: translateY(1px) }
/* Scroll top button */
.to-top{ position:fixed; bottom:120px; right:16px; border:none; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:999px; padding:.6rem; box-shadow:var(--shadow); cursor:pointer; opacity:0; transform:translateY(20px); transition:opacity .3s, transform .3s; z-index:95 }
.to-top.show{ opacity:1; transform:none }
/* Ripple effect */
.ripple{ position:absolute; border-radius:50%; transform:scale(0); animation:ripple .6s linear; background:rgba(255,255,255,.3); pointer-events:none }
@keyframes ripple{ to{ transform:scale(4); opacity:0 } }
/* Loader */
.loader{ position:fixed; inset:0; display:grid; place-items:center; background:var(--bg); z-index:200; transition:opacity .5s ease; }
.loader.hidden{ opacity:0; pointer-events:none }
.spinner{ width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); animation:spin 1.2s linear infinite; filter:blur(10px) saturate(180%); }
@keyframes spin{ to{ transform:rotate(360deg) } }
/* Accesibilidad: focus rings */
.icon-btn:focus-visible, .btn:focus-visible, .chip:focus-visible, .select:focus-visible, .input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
/* Contain para limitar repaints */
.list, .detail{ contain: paint }
/* Responsive */
  @media (max-width: 980px){
  .layout{ grid-template-columns: 1fr }
  .pane-resizer{ display:none }
  .list{ height: auto; max-height: none }
  .detail{ height: auto; max-height: none }
  .detail-head{ display:flex }
  .controls{ grid-template-columns: 1fr; gap:10px }
  .status{ justify-self:start }
  .fab{ display:flex }
  /* Vista móvil: por defecto solo lista; al abrir detalle, animar cruce */
  .detail-pane{ display:none; opacity:0; transform: translateX(6%); transition: transform .2s ease, opacity .2s ease; z-index: 60 }
  body.detail-open .list-pane{ display:none !important }
  body.detail-open .detail-pane{ display:block !important; opacity:1; transform:none }
  /* sin espacio inferior: evitar scroll bajo el footer fijo */
  .layout{ margin: 8px 0 0 }
  /* evitar issues de iOS con background-attachment:fixed */
  body{ background-attachment: scroll }
  /* filtros apilados en móvil */
  .filters{ grid-template-columns: 1fr; gap:8px }
  .filters-left{ flex-direction: column; align-items: flex-start; gap:6px }
  .filters-left .chips{ flex-wrap: wrap }
  /* alinear botones bajo el input a la izquierda */
  .control-buttons{ justify-self: start }
}

/* Usar viewport pequeños en navegadores que lo soportan (iOS moderno) */
@supports (height: 100svh){
  body{ min-height: 100svh }
  .layout{ min-height: min(70svh, 900px) }
}
@media (min-width: 981px){
  body.detail-open .list-pane{ display:block }
  body.detail-open .detail-pane{ display:block }
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important }
}
/* Page intro animation */
@keyframes rise { from{ opacity:0; transform: translateY(12px) } to{ opacity:1; transform:none } }
.topbar, .controls, .layout{ animation: rise .4s ease both }
/* ajustes de glass y tema en componentes móviles y badge */
.badge{ background: var(--panel); border:1px solid var(--border); color: var(--text) }
/* FAB buttons con blur propio (no en contenedor) */
.fab{ background: transparent; backdrop-filter: none !important }
.fab-btn{ border:1px solid var(--border); background: var(--panel); color: var(--text); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06) }
.icon-btn, .btn{ background: var(--panel); color: var(--text) }
.icon-btn:hover{ border-color: var(--accent) }
.btn{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff }
[data-theme="light"] .btn{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff }
/* Botones con efecto del footer (bottombar y variantes de botón) */
.bottombar .icon-btn,
.btn-circle.glass-lg,
.glass-lg--btn{
  background: var(--panel);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
}