/* =============== ZetaConvert · styles.css =============== */
/* Paleta clara: blanco primario, rojo pastel secundario, grises/negros terciarios */
/* Modo oscuro (nuevo): grises profundos con matices, acento rojo suave “agradable” */

/* ------------------ Tokens base (Light) ------------------ */
:root{
  /* Superficies y texto */
  --bg: #ffffff;
  --bg-soft: #f7f8fb;
  --text: #15161a;
  --muted: #6b7280;
  --border: #e9eef3;

  /* Acentos (rojo pastel) */
  --accent: #ff6b81;
  --accent-600: #ff536d;
  --accent-700: #ff3c5a;
  --accent-50: rgba(255,107,129,.12);
  --accent-ring: rgba(255,107,129,.28);

  /* Brand legacy (alias para compat) */
  --primary: var(--accent);
  --primary-600: var(--accent-600);
  --primary-700: var(--accent-700);
  --primary-50:  var(--accent-50);

  /* Descarga (azul pastel) */
  --download: #8bbcff;
  --download-600: #6ea6ff;
  --download-ring: rgba(139,188,255,.32);

  /* Neutros */
  --card-bg: #fff;
  --panel-bg: #fff;

  /* Efectos */
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(17,18,22,.05), 0 8px 24px rgba(17,18,22,.08);
  --shadow-sm: 0 1px 2px rgba(17,18,22,.06), 0 4px 10px rgba(17,18,22,.06);
  --ring: 0 0 0 3px var(--accent-ring);
}

/* ------------------ Tokens (Dark, estilo chatGPT/gris) ------------------ */
html.dark{
  /* Superficies */
  --bg: #0f1115;          /* base fondo */
  --bg-soft: #12151b;     /* superposición suave */
  --card-bg: #11141a;     /* tarjetas */
  --panel-bg: #0e1218;    /* paneles/containers */

  /* Texto y bordes */
  --text: #e7e9ee;        /* texto principal */
  --muted: #a8b0bd;       /* texto secundario */
  --border: #2a2f3a;      /* líneas/bordes (gris-azulado) */

  /* Acento rojo más amable */
  --accent: #ff5c77;
  --accent-600: #ff4766;
  --accent-700: #ff2f54;
  --accent-50: rgba(255,92,119,.14);
  --accent-ring: rgba(255,92,119,.32);

  --primary: var(--accent);
  --primary-600: var(--accent-600);
  --primary-700: var(--accent-700);
  --primary-50:  var(--accent-50);

  /* Descarga (azul, desaturado para dark) */
  --download: #7fa5f5;
  --download-600: #648ff2;
  --download-ring: rgba(100,143,242,.34);

  /* Sombras */
  --shadow: 0 10px 28px rgba(0,0,0,.55);
  --shadow-sm: 0 6px 16px rgba(0,0,0,.45);

  --ring: 0 0 0 3px var(--accent-ring);
}

/* Selección de texto (agradable en ambos temas) */
::selection{ background: var(--accent-600); color: #fff; }
::-moz-selection{ background: var(--accent-600); color: #fff; }

/* ------------------ Base tipografía/layout ------------------ */
*{box-sizing:border-box}
html{font-family:"Jost",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif}
h1{font-weight:700} h2{font-weight:600} h3{font-weight:500} body{font-weight:400}
html,body{height:100%}
body{margin:0;color:var(--text);background:var(--bg);line-height:1.6;font-size:16px}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.93}
.muted{color:var(--muted)}
.container{max-width:1100px;margin-inline:auto;padding-inline:20px}
h1,h2,h3{line-height:1.2;margin:0 0 .5rem}
h1{font-size:clamp(28px,3.5vw,40px);letter-spacing:-.02em;font-weight:750}
h2{font-size:clamp(20px,2.2vw,26px);font-weight:680}
h3{font-size:clamp(17px,1.6vw,20px);font-weight:650}
p{margin:.25rem 0 .75rem}

/* Prefiere menos animaciones */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ------------------ Header/Nav ------------------ */
.header{
  position:sticky;top:0;z-index:30;
  background:rgba(255,255,255,.75);
  backdrop-filter:saturate(1.1) blur(10px);
  border-bottom:1px solid var(--border)
}
html.dark .header{background:rgba(16,18,24,.72)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;max-width:1200px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--text)}
.nav-links{display:flex;align-items:center;gap:14px;list-style:none;margin:0;padding:0}
.nav-links a{display:inline-flex;align-items:center;height:36px;padding:0 10px;border-radius:10px;color:var(--text)}
.nav-links a[aria-current="page"]{background:var(--bg-soft)}

/* ------------------ Hero/Main ------------------ */
.hero{max-width:1100px;margin:18px auto 10px;padding:28px 20px 8px}
main{max-width:1100px;margin:0 auto;padding:0 20px 48px}

/* ------------------ Paneles / Cards ------------------ */
.panel{
  background:var(--panel-bg);
  border:1px solid var(--border);
  border-radius:20px;
  padding:18px;
  box-shadow:var(--shadow)
}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
@media (max-width:960px){.cards{grid-template-columns:1fr}}
.card{
  display:block;border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:16px;background:var(--card-bg);color:inherit;text-decoration:none;
  box-shadow:var(--shadow-sm);
  transition:transform .12s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease
}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(12,16,24,.14);border-color:rgba(255,92,119,.35)}
.card:focus-visible{outline:none;box-shadow:var(--ring);border-color:var(--accent)}

/* ------------------ Inputs/Botones ------------------ */
label{display:block;font-weight:600;margin-bottom:6px}
input[type="text"],input[type="number"],input[type="email"],select{
  width:100%;height:42px;padding:0 12px;border-radius:12px;border:1px solid var(--border);
  background:#fff;color:var(--text);
  outline:none;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease
}
html.dark input[type="text"],html.dark input[type="number"],html.dark input[type="email"],html.dark select{
  background:#0f141b;border-color:var(--border);color:var(--text)
}
input[type="file"]{
  width:100%;padding:10px 12px;border-radius:12px;border:1px dashed var(--border);
  background:var(--bg-soft);cursor:pointer
}
html.dark input[type="file"]{background:#151b23;border-color:var(--border)}
input:focus,select:focus{border-color:var(--accent);box-shadow:var(--ring)}

.btn{
  --h:44px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:var(--h);padding:0 16px;border:0;border-radius:12px;cursor:pointer;
  font-weight:700;background:#f2f3f6;color:var(--text);box-shadow:var(--shadow-sm);
  transition:transform .05s ease,box-shadow .2s ease,background .2s ease
}
.btn:hover{transform:translateY(-1px)}
html.dark .btn{background:#1a2029}
html.dark .btn:hover{background:#202733}

.btn.primary{background:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-600)}
.btn.primary:active{background:var(--primary-700)}

/* Descarga pastel azul */
.btn.download,#btnDownloadAll{
  background: var(--download);
  color: #0b1b35;
  font-weight: 700;
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: 0 4px 12px var(--download-ring);
}
.btn.download:hover,#btnDownloadAll:hover{background:var(--download-600)}

/* ------------------ Barra de progreso ------------------ */
.progress{
  height:8px;border-radius:999px;background:var(--bg-soft);
  border:1px solid var(--border);overflow:hidden
}
.progress .bar{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--primary),#ff9aa8);
  transition:width .15s ease
}
html.dark .progress{background:#151b23}
html.dark .progress .bar{background:linear-gradient(90deg,var(--primary),#ff8fa0)}

/* ------------------ Accesibilidad ------------------ */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{
  position:fixed;left:10px;top:10px;width:auto;height:auto;
  padding:8px 10px;background:#000;color:#fff;border-radius:8px;z-index:1000
}

/* ------------------ Tabs categorías ------------------ */
.cat-tabs{
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* todos iguales */
  gap: 12px;
  margin-top: 16px;
  max-width: 520px;      /* mismo ancho que el buscador */
  margin-inline: auto;   /* centrados */
}

.cat-tab{
  display: flex;
  justify-content: space-between; /* texto a la izq, icono a la der */
  align-items: center;
  padding: 0 16px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg,#fff,#fafbfe);
  color: var(--text);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease,
              border-color .2s ease, background .2s ease;
  outline: none;
}

.cat-tab .icon-mask{
  flex-shrink: 0;
  margin-left: 8px;   /* separa texto e icono */
}

html.dark .cat-tab{ background: linear-gradient(180deg,#272727,#222222); }
.cat-tab:hover{ transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.cat-tab:focus-visible{ box-shadow: var(--ring); border-color: var(--accent); }

.cat-tab.active{
  background: linear-gradient(180deg,var(--primary-50),#fff);
  border-color: rgba(255,107,129,.35);
  box-shadow: 0 8px 24px rgba(255,107,129,.15);
}
html.dark .cat-tab.active{
  background: linear-gradient(180deg,rgba(255,122,143,.10),#292929);
  border-color: rgba(255,122,143,.28);
  box-shadow: 0 10px 28px rgba(255,122,143,.18);
}

@media (max-width:720px){
  .cat-tabs{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width:480px){
  .cat-tabs{ grid-template-columns: 1fr; }
}

/* ------------------ Buscador + Popover ------------------ */
.searchbox{position:relative;display:flex;gap:10px;align-items:center}
.search-input{
  flex:1;height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--border);
  background:#fff;color:var(--text)
}
.search-input:focus{border-color:var(--accent);box-shadow:var(--ring);outline:0}
html.dark .search-input{background:#0f141b}

.popover{
  position:absolute;left:0;right:0;top:calc(100% + 8px);
  background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;
  box-shadow:0 18px 48px rgba(32, 32, 32, 0.22);animation:zc-pop-in .12s ease;z-index:1000
}
html.dark .popover{background:#0f141a;border-color:#222935;box-shadow:0 18px 48px rgba(0,0,0,.6)}
@keyframes zc-pop-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

.popover-list{max-height:340px;overflow:auto;display:flex;flex-direction:column}
.popover-item{
  padding:12px 14px;border-bottom:1px solid rgba(17,18,22,.08);
  color:inherit;text-decoration:none;display:block
}
.popover-item:hover{background:rgba(255,92,119,.08)}
html.dark .popover-item{border-bottom:1px solid #1c2230}
html.dark .popover-item:hover{background:rgba(255,92,119,.10)}
.popover-foot{padding:8px 14px;background:rgba(255,92,119,.06);border-top:1px solid var(--border)}
html.dark .popover-foot{background:#0f141a;border-top:1px solid #222935}

/* ------------------ Badges ------------------ */
.badge{
  display:inline-block;padding:4px 8px;border-radius:999px;font-size:.9rem;
  background:var(--bg-soft);border:1px solid var(--border);color:var(--muted);
  transition:border-color .2s ease,background .2s ease
}
.badge:hover{border-color:rgba(255,92,119,.35);background:rgba(255,92,119,.06)}
html.dark .badge:hover{border-color:rgba(255,92,119,.32);background:rgba(255,92,119,.10)}

/* ------------------ Footer ------------------ */
.footer{border-top:1px solid var(--border);background:var(--bg)}
.foot{max-width:1200px;margin:0 auto;padding:18px 20px;display:flex;align-items:center;gap:12px;color:var(--muted)}
.foot a{color:inherit;text-decoration:underline dotted}

/* ------------------ Cola / Dropzone ------------------ */
.dropzone{
  border:3px dashed var(--primary);
  background: rgba(255,92,119,.06);
  border-radius:16px;
  padding:30px;
  text-align:center;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.dropzone:hover,.dropzone.dragover{
  background: rgba(255,92,119,.10);
  border-color: var(--primary-700);
  box-shadow: var(--ring);
}

.queue{display:grid;gap:12px;margin-top:12px}
.queue-item{padding:14px;border-radius:14px;border:1px solid var(--border);background:var(--bg)}
.qi-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.qi-meta{display:flex;flex-direction:column}
.qi-name{font-weight:650}
.qi-size{font-size:.92rem}
.qi-actions{display:flex;gap:8px;flex-wrap:wrap}
.qi-select{min-width:180px;text-transform:uppercase}

/* Select “estético” para per-file override (opcional) */
.select{
  border:2px solid #e88aa0;
  border-radius:10px;
  padding:6px 12px;
  background:var(--card-bg);
  color:var(--text);
}
.select:focus{border-color:#d96a88;box-shadow:0 0 0 3px rgba(217,106,136,.28)}

@media (max-width:720px){
  .qi-head{flex-direction:column;align-items:flex-start}
  .qi-actions{width:100%}
}

/* ------------------ Responsive básicos ------------------ */
@media (max-width:960px){
  .nav{padding:10px 14px}
  .panel{padding:16px}
}

/* ------------------ Print ------------------ */
@media print{
  .header,.footer,.actions,.progress,.expander,.hero,.nav-links{display:none!important}
  main{padding:0}
}

/* ------------------ Buscador en el header ------------------ */
.nav { gap: 12px; }
.nav-search{ position: relative; flex: 1 1 460px; max-width: 520px; }
.search-input--top{ height: 38px; border-radius: 10px; }
.popover--top{ top: calc(100% + 6px); }

/* Responsive: en móviles el buscador ocupa toda la fila */
@media (max-width: 960px){
  .nav{ flex-wrap: wrap; }
  .nav-search{ order: 3; flex: 1 1 100%; max-width: none; }
  .nav-links{ order: 2; }
  .actions{ order: 4; }
}

/* ====== Iconos por máscara (mask + currentColor) ====== */
.icon-mask{
  display:inline-block;
  width: 18px; height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--icon-url) no-repeat center / contain;
  mask: var(--icon-url) no-repeat center / contain;
  vertical-align: -3px;
}
.icon-20{ width:20px; height:20px; }
.btn .icon-mask{ margin-right: 8px; }

/* Por defecto heredamos el color del texto; en dark lo forzamos a blanco donde convenga */
.actions .icon-mask,
.nav-search .icon-mask{ color: var(--text); }
html.dark .actions .icon-mask,
html.dark .nav-search .icon-mask{ color: #fff; }

/* ====== Input con icono “dentro” a la derecha ====== */
.input-icon-wrap{ position: relative; }
.input-icon{ padding-left: 12px; }           /* base */
.input-icon--right{ padding-right: 36px; }   /* espacio para el icono */

.input-icon-right{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .85;
}

/* (opcional) si usás icono a la izquierda en otros campos */
.input-icon-left{
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .85;
}
.input-with-left{ padding-left: 36px; }

/* (si aún usás icono a la izquierda en otros lugares)
.icon-left {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .8;
}
.input-icon { padding-left: 36px; }
*/
/* Centrar cabeceras de panel + alinear h2 con icono */
.panel-head{
  text-align:center;
}
.panel-head h2{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;              /* espacio entre texto e icono */
  margin:0 auto .25rem;  /* centra el bloque y ajusta margen inferior */
}
.panel-head p{
  margin-top: 2px;
}

/* Si ya tenías margen en el icono, ajustalo para que quede a la DERECHA */
.panel-head h2 .icon-mask{
  margin-right: 0;
  margin-left: 8px;      /* icono a la derecha del texto */
  vertical-align: -3px;
}
/* ====== Converter layout ====== */
.converter-head{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:16px;
  align-items:center;
  margin-bottom:12px;
}
.converter-head-right{
  display:flex;
  align-items:center;
  gap:12px;
}
.lbl{ font-weight:650; }
.head-actions{ display:flex; align-items:center; gap:10px; }

/* Dropzone pastel roja mejorada */
.dropzone.dz-pastel{
  border:2px dashed var(--accent-600);
  background: linear-gradient(180deg, var(--primary-50), rgba(255,107,129,.04));
  border-radius:16px;
  padding:28px;
  text-align:center;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .06s ease;
  position:relative;
}
.dropzone.dz-pastel:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.dropzone.dz-pastel.dragover{
  background: linear-gradient(180deg, rgba(255,107,129,.12), rgba(255,107,129,.06));
  border-color: var(--primary-700);
  box-shadow: var(--ring);
}
.dz-inner{ display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap; }
.dz-cta{ display:flex; flex-direction:column; align-items:center; gap:4px; }

/* Cola de archivos */
.queue{ display:grid; gap:12px; margin-top:12px; }
.qi{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--bg);
}
.qi-left{
  display:grid;
  grid-template-columns: minmax(0,1fr) 200px;
  gap:12px;
  align-items:center;
}
@media (max-width:720px){
  .qi{ grid-template-columns: 1fr; }
  .qi-left{ grid-template-columns: 1fr; }
}
.qi-meta{
  min-width:0;
}
.qi-name{ font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qi-size{ font-size:.92rem; color:var(--muted); }

.qi-right{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end;
}

/* Progreso dentro del item */
.qi-progress{
  height:8px; border-radius:999px; background:var(--bg-soft); border:1px solid var(--border); overflow:hidden;
}
.qi-progress .bar{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--primary),#ff9aa8);
  transition:width .15s ease;
}
html.dark .qi-progress{ background:#151b23; }
html.dark .qi-progress .bar{ background:linear-gradient(90deg,var(--primary),#ff8fa0); }

/* Botones del item */
.qi-actions{ display:flex; align-items:center; gap:8px; }
.qi-actions .btn.compact{ height:36px; padding:0 12px; }
.qi-target{ min-width:160px; text-transform:uppercase; }

/* Estado deshabilitado visual */
.btn[disabled]{ opacity:.6; cursor:not-allowed; }