/* ===== Base ===== */
:root{
  --bg: #0b0c10;
  --card: rgba(255,255,255,.08);
  --glass: rgba(255,255,255,.10);
  --stroke: rgba(255,255,255,.18);
  --fg: #f7f7f7;
  --muted: #a7acb3;
  --primary: #e13c8a;
  --primary-2:#ff66a6;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}
:root[data-theme="light"]{
  --bg: #f7f7fb;
  --card: rgba(255,255,255,1);
  --glass: rgba(255,255,255,.7);
  --stroke: rgba(0,0,0,.08);
  --fg: #141414;
  --muted: #6b7280;
  --shadow: 0 12px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--fg);
  font: 400 16px/1.4 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
}

/* ===== Fondo animado ===== */
.bg{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:-1}
.bg__layer{position:absolute; inset:-20%}
.bg__layer--1{
  background: radial-gradient(60% 60% at 20% 20%, rgba(225,60,138,.25), transparent 60%),
              radial-gradient(60% 60% at 80% 30%, rgba(102,126,234,.15), transparent 60%);
  filter: blur(30px);
  animation: float1 18s linear infinite alternate;
}
.bg__layer--2{
  background: radial-gradient(50% 50% at 70% 80%, rgba(255,255,255,.08), transparent 60%);
  filter: blur(40px);
  animation: float2 24s linear infinite alternate;
}
.bg__noise{
  position:absolute; inset:0; background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E") center/240px repeat;
  mix-blend-mode: overlay; opacity:.35;
}
@keyframes float1{to{transform:translate3d(15px,-10px,0)}}
@keyframes float2{to{transform:translate3d(-10px,12px,0)}}

/* ===== Header ===== */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter: blur(10px); border-bottom:1px solid var(--stroke); background:linear-gradient(to bottom, rgba(0,0,0,.25), transparent)}
.site-header__inner{max-width:1100px; margin:auto; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:36px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.25))}
.brand__text h1{font:700 18px 'Montserrat', sans-serif; margin:0}
.brand__text p{margin:2px 0 0; color:var(--muted); font-size:.92rem}

.actions{display:flex; align-items:center; gap:10px}
.theme-toggle{height:40px; width:40px; border-radius:10px; background:var(--card); border:1px solid var(--stroke); color:var(--fg); cursor:pointer}
.theme-toggle:hover{transform:translateY(-1px)}
.theme-toggle .sun{display:var(--sun, none)}
.theme-toggle .moon{display:var(--moon, inline)}
:root[data-theme="light"] .theme-toggle{--sun:inline;--moon:none}

/* ===== Loader ===== */
.loader{position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.35); backdrop-filter: blur(6px)}
.loader.hide{opacity:0; transition:.6s ease}
.loader__card{padding:28px; min-width:280px; text-align:center}
.loader__card img{height:46px; margin-bottom:14px}
.loader__spinner{width:26px; height:26px; margin:10px auto 6px; border-radius:50%;
  border:3px solid rgba(255,255,255,.25); border-top-color:var(--primary); animation:spin .7s linear infinite}
.loader__card p{color:var(--muted); margin:0}
@keyframes spin {to{transform:rotate(360deg)}}

/* ===== Layout ===== */
.container{max-width:1100px; margin:30px auto 60px; padding:0 18px}
.glass{background:var(--glass); border:1px solid var(--stroke); border-radius:16px; box-shadow: var(--shadow)}
.panel{padding:18px; display:none}
.panel.active{display:block}
.panel__header h2{margin:0 0 4px; font:700 22px 'Montserrat',sans-serif}
.panel__header .muted{color:var(--muted)}

/* ===== Tabs ===== */
.tabs{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap}
.tab{background:var(--card); color:var(--fg); border:1px solid var(--stroke); border-radius:12px; padding:10px 14px; cursor:pointer}
.tab.active{background:linear-gradient(135deg, var(--primary), var(--primary-2)); border-color:transparent}

/* ===== Form ===== */
.form-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media (max-width:900px){ .form-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){ .form-grid{grid-template-columns:1fr}}

.form-inline{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-top:8px}
.field label{display:block; font-weight:600; margin:2px 0 6px}
select, input[type="number"]{
  width:100%; padding:12px 10px; border-radius:12px;
  background:var(--card); border:1px solid var(--stroke); color:var(--fg)
}
select:focus, input[type="number"]:focus{outline:2px solid var(--primary)}

.panel__actions{display:flex; gap:10px; margin-top:10px}

/* === Fix: colores del desplegable nativo de <select> === */

/* Variables para el popup del select */
:root{
  --select-popup-bg: #1f2126;   /* fondo del menú en tema oscuro */
  --select-popup-fg: #f7f7f7;   /* texto del menú en tema oscuro */
}
:root[data-theme="light"]{
  --select-popup-bg: #ffffff;   /* fondo del menú en tema claro */
  --select-popup-fg: #111111;   /* texto del menú en tema claro */
}

/* Colores del menú desplegable (Chrome/Edge/Firefox) */
select option,
select optgroup {
  background: var(--select-popup-bg) !important;
  color: var(--select-popup-fg) !important;
}

/* Estados */
select option[disabled] { color: var(--muted) !important; }
select option:checked,
select option:hover { background: rgba(225,60,138,.18) !important; }

/* Por si algún navegador hereda blanco */
select { color: var(--fg); background: var(--card); }


/* Buttons */
.btn{padding:12px 16px; border-radius:12px; border:1px solid var(--stroke); background:var(--card); color:var(--fg); cursor:pointer}
.btn--primary{background:linear-gradient(135deg, var(--primary), var(--primary-2)); border:none}
.btn--primary:hover{filter:brightness(1.05)}
.btn--ghost{background:transparent}

/* Alerts */
.alert{min-height:18px; margin:6px 0 10px; color:var(--muted)}

/* ===== Adaptadores ===== */
.adaptadores-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:12px; margin:6px 0 14px}
.adaptador{background:var(--card); border:1px solid var(--stroke); border-radius:14px; text-align:center; padding:12px; cursor:pointer; transition:.25s}
.adaptador.selected{outline:3px solid var(--primary); outline-offset:0}
.adaptador img{height:70px; object-fit:contain; filter: drop-shadow(0 6px 18px rgba(0,0,0,.25))}
.adaptador:hover{transform:translateY(-2px)}

/* ===== Resultados ===== */
.results, .cards{margin-top:12px}
.table-wrap{overflow:auto; border:1px solid var(--stroke); border-radius:12px; background:var(--card)}
.table{width:100%; border-collapse:collapse}
.table th, .table td{padding:12px 10px; border-bottom:1px solid var(--stroke); white-space:nowrap}
.table th{position:sticky; top:0; background:rgba(0,0,0,.25); backdrop-filter: blur(6px); text-align:left; font-weight:700}

.result-card{background:var(--card); border:1px solid var(--stroke); border-radius:14px; padding:14px; display:grid; grid-template-columns:1fr auto; gap:10px}
.result-card img{height:80px; object-fit:contain}

/* ===== Segmented (idiomas) ===== */
.segmented{display:inline-flex; background:var(--card); border:1px solid var(--stroke); border-radius:12px; padding:4px}
.segmented button{border:none; background:transparent; color:var(--fg); padding:8px 10px; border-radius:8px; cursor:pointer}
.segmented button:hover{background:rgba(255,255,255,.08)}

/* ===== Footer ===== */
.site-footer{text-align:center; color:var(--muted); padding:30px 16px 48px; border-top:1px solid var(--stroke); background:linear-gradient(to top, rgba(0,0,0,.25), transparent)}

/* ===== Helpers ===== */
.muted{color:var(--muted)}
/* ===== Tabla responsiva: se apila como tarjetas bajo 680px ===== */
@media (max-width: 680px){
  .table-wrap{border:none; background:transparent}
  table.table{display:block; border:0}
  .table thead{display:none}
  .table tbody{display:grid; gap:12px}
  .table tr{
    display:grid;
    background:var(--card);
    border:1px solid var(--stroke);
    border-radius:14px;
    padding:10px 12px;
    grid-template-columns: 1fr 1fr; /* 2 columnas en móvil */
    gap:6px 12px;
  }
  .table td{
    display:flex;
    gap:8px;
    border:0;
    padding:6px 0;
    white-space:normal;
  }
  .table td::before{
    content: attr(data-label);
    min-width: 92px;
    font-weight:700;
    color: var(--muted);
  }
}
/* Tocar más cómodo en móvil */
@media (max-width: 560px){
  .tab{padding:10px 12px}
  .btn{width:100%}
  .panel{padding:14px}
  .form-inline{gap:8px}
  select, input[type="number"]{padding:12px}
}

/* Evitar zoom por tap en iOS y respetar notch */
input, select, button { font-size:16px; }
body { padding-bottom: env(safe-area-inset-bottom); }

.table-wrap {
  overflow-x: auto;
  max-height: 60vh;
  scrollbar-width: thin;
}

.table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}

.table th, .table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: middle;
}

.table td:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.table img.thumb {
  width: 80px;
  height: auto;
  border-radius: 8px;
  transition: transform 0.2s ease;
  cursor: zoom-in;
}
.table img.thumb:hover {
  transform: scale(1.05);
}
/* ===== Fondo de video (YouTube o MP4 local) ===== */
.video-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.video-bg iframe,
.video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  filter: brightness(0.35);
}