/* Imagen de marca de inthesk.net: morado #5015A0, fondos cálidos, tipografía Figtree, botones en píldora */
:root {
  --fondo: #f6f3ee; --panel: #ffffff; --borde: #e7e1d7; --texto: #130f0c; --suave: #6a625b;
  --marca: #5015a0; --marca-hover: #3d0d8f; --marca-2: #efe8fa; --marca-texto: #ffffff;
  --ok: #1f8a3b; --ok-2: #e6f8e9; --mal: #c92a2a; --mal-2: #fdecec;
  --aviso: #b8650a; --aviso-2: #fff4dc; --info: #0077c2; --info-2: #e3f3ff;
  --sombra: 0 1px 2px rgba(19,15,12,.05), 0 8px 24px rgba(80,21,160,.06);
  --radio: 16px;
  --letra: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0f0b16; --panel: #18121f; --borde: #2c2338; --texto: #f3f0f7; --suave: #a79fb3;
    --marca: #9b6bff; --marca-hover: #b48fff; --marca-2: #2a1a45; --marca-texto: #0f0b16;
    --ok: #5fd37a; --ok-2: #13301c; --mal: #ff7b7b; --mal-2: #3a1717; --aviso: #ffb547; --aviso-2: #352710; --info: #5dceff; --info-2: #0f2b3d;
    --sombra: none;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--texto); font: 15px/1.5 var(--letra); }
h1, h2, h3, .titulo h1, .marca b { letter-spacing: -.02em; }
.titulo h1 { font-weight: 900; }
button, input, select, textarea { font: inherit; color: inherit; }
.oculto { display: none !important; }

/* Marca */
.marca { display: flex; align-items: center; gap: 10px; }
.marca b { font-weight: 800; font-size: 20px; color: var(--marca); line-height: 1; }
.marca small { display: block; color: var(--suave); font-size: 12px; font-weight: 600; margin-top: 2px; }
.logo { width: 36px; height: 36px; border-radius: 50%; display: block; }

/* Acceso */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.acceso-caja { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--borde); border-radius: 24px; padding: 32px 28px; box-shadow: var(--sombra); display: grid; gap: 18px; }
.acceso { background: radial-gradient(circle at 20% 0%, var(--marca-2), transparent 55%), var(--fondo); }
form { display: grid; gap: 12px; }
label { display: grid; gap: 4px; font-size: 13px; color: var(--suave); }
input, select, textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--borde); border-radius: 12px; background: var(--fondo); color: var(--texto); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marca); outline-offset: -1px; }
textarea { min-height: 80px; resize: vertical; }
.ayuda { color: var(--suave); font-size: 12px; }
.msg { margin: 0; min-height: 1em; font-size: 13px; color: var(--mal); }
.msg.ok { color: var(--ok); }

/* Botones */
.btn { border: 1px solid var(--borde); background: var(--panel); padding: 9px 18px; border-radius: 999px; cursor: pointer; font-weight: 700; white-space: nowrap; transition: background .2s, border-color .2s; }
.btn:hover { border-color: var(--marca); }
.btn.primario { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); }
.btn.primario:hover { background: var(--marca-hover); border-color: var(--marca-hover); }
.btn.peligro { background: var(--mal); border-color: var(--mal); color: #fff; }
.btn.exito { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.suave { background: transparent; }
.btn.mini { padding: 4px 9px; font-size: 13px; }
.btn.ancho { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.enlace { background: none; border: 0; color: var(--suave); cursor: pointer; text-decoration: underline; font-size: 13px; }

/* Cabecera y menú */
.cabecera { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--panel); border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.estado { flex: 1; display: flex; justify-content: center; }
.usuario { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.menu { display: flex; gap: 4px; padding: 8px 20px; background: var(--panel); border-bottom: 1px solid var(--borde); overflow-x: auto; position: sticky; top: 55px; z-index: 4; }
.menu button { border: 0; background: none; padding: 8px 14px; border-radius: 999px; cursor: pointer; color: var(--suave); font-weight: 700; white-space: nowrap; }
.menu button:hover { color: var(--marca); }
.menu button.activo { background: var(--marca-2); color: var(--marca); }
main { padding: 20px; max-width: 1280px; margin: 0 auto; display: grid; gap: 20px; }

.pastilla { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.pastilla.on { background: var(--ok-2); color: var(--ok); }
.pastilla.off { background: var(--mal-2); color: var(--mal); }
.punto { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.pastilla.on .punto { animation: latido 1.6s infinite; }
@keyframes latido { 50% { opacity: .3; } }

/* Tarjetas */
.titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.titulo h1 { font-size: 22px; margin: 0; }
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra); }
.tarjeta h2 { font-size: 15px; margin: 0 0 12px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; }
.kpi small { color: var(--suave); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.kpi b { display: block; font-size: 28px; line-height: 1.2; margin-top: 4px; font-variant-numeric: tabular-nums; }
.dos { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }

/* Barras */
.barras { display: flex; align-items: flex-end; gap: 8px; height: 140px; }
.barra { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; text-align: center; font-size: 11px; color: var(--suave); height: 100%; }
.barra i { display: block; background: var(--marca); border-radius: 8px 8px 3px 3px; min-height: 3px; }
.barra i.ok { background: var(--ok); }
.barra span { font-variant-numeric: tabular-nums; }

/* Tablas */
.tabla-env { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; color: var(--suave); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: 8px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
td { padding: 9px 10px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
tr.clic { cursor: pointer; }
tr.clic:hover td { background: var(--fondo); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.vacio { color: var(--suave); text-align: center; padding: 28px; }

.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--fondo); border: 1px solid var(--borde); white-space: nowrap; }
.chip.ok { background: var(--ok-2); color: var(--ok); border-color: transparent; }
.chip.mal { background: var(--mal-2); color: var(--mal); border-color: transparent; }
.chip.aviso { background: var(--aviso-2); color: var(--aviso); border-color: transparent; }
.chip.info { background: var(--info-2); color: var(--info); border-color: transparent; }
.chip.marca { background: var(--marca-2); color: var(--marca); border-color: transparent; }

.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.filtros label { min-width: 150px; flex: 1; }
.paginas { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 12px; color: var(--suave); font-size: 13px; }

/* Campañas */
.camp { display: grid; gap: 10px; }
.camp-cab { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.camp-cab h3 { margin: 0; font-size: 16px; }
.camp dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.camp dt { color: var(--suave); }
.camp dd { margin: 0; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 16px; z-index: 20; }
.modal-caja { background: var(--panel); border-radius: 16px; width: 100%; max-width: 640px; max-height: 92vh; overflow: auto; padding: 24px; position: relative; }
.modal-caja h2 { margin: 0 0 16px; }
.cerrar { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 26px; cursor: pointer; color: var(--suave); }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.marcas { display: flex; flex-wrap: wrap; gap: 6px; max-height: 180px; overflow: auto; padding: 8px; border: 1px solid var(--borde); border-radius: 9px; }
.marcas label { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; color: var(--texto); font-size: 13px; padding: 3px 8px; border-radius: 999px; background: var(--fondo); cursor: pointer; }
.marcas input { width: auto; }
.detalle dl { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; }
.detalle dt { color: var(--suave); font-size: 13px; }
.detalle dd { margin: 0; }
audio { width: 100%; margin-top: 8px; }

/* Avisos */
.avisos { position: fixed; bottom: 16px; right: 16px; display: grid; gap: 8px; z-index: 30; }
.aviso { background: var(--texto); color: var(--fondo); padding: 10px 16px; border-radius: 10px; font-size: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.2); max-width: 340px; }
.aviso.error { background: var(--mal); color: #fff; }

/* ---------- Móvil y tablet ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Solo en html: si se pone también en body, body pasa a ser el que hace scroll y se rompe el desplazamiento en móvil */
html { overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }
.acceso { min-height: 100svh; }
img, audio, video, iframe { max-width: 100%; }
/* Cualquier texto largo (nombres, emails, enlaces) se parte en vez de ensanchar la página */
td, dd, .camp h3, .kpi, .aviso, .detalle, .tarjeta p { overflow-wrap: anywhere; word-break: break-word; }
td { max-width: 340px; }
main > *, .tarjeta, .rejilla > *, .dos > *, .kpis > * { min-width: 0; }
.cabecera { padding-top: max(10px, env(safe-area-inset-top)); }

@media (max-width: 800px) {
  /* iOS no hace zoom al escribir si la letra es de 16px */
  input, select, textarea { font-size: 16px; }

  .cabecera { position: relative; padding: max(10px, env(safe-area-inset-top)) 16px 10px; gap: 10px; }
  .cabecera .marca b { font-size: 18px; }
  .usuario { margin-left: auto; }
  .usuario #u-nombre { display: none; }
  .estado { order: 3; flex-basis: 100%; justify-content: stretch; }
  .pastilla { width: 100%; justify-content: space-between; flex-wrap: wrap; border-radius: 12px; padding: 8px 10px 8px 14px; }

  .menu { position: sticky; top: 0; padding: 8px 12px; gap: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .menu::-webkit-scrollbar { display: none; }
  .menu button { padding: 9px 12px; }

  main { padding: 14px 12px calc(24px + env(safe-area-inset-bottom)); gap: 14px; }
  .titulo h1 { font-size: 20px; }
  .tarjeta { padding: 14px; }
  .dos, .form-2 { grid-template-columns: 1fr; }
  .rejilla { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi b { font-size: 24px; }
  .filtros { gap: 8px; }
  .filtros label { min-width: calc(50% - 4px); flex: 1 1 calc(50% - 4px); }
  .filtros label:first-child { min-width: 100%; }
  .filtros .btn { width: 100%; }

  /* Tablas convertidas en fichas */
  .tabla-env { overflow: visible; }
  table, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tr { border: 1px solid var(--borde); border-radius: 10px; padding: 6px 10px; margin-bottom: 10px; background: var(--panel); }
  td { border: 0; padding: 5px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right; max-width: none; min-width: 0; }
  td > * { min-width: 0; max-width: 100%; }
  td::before { content: attr(data-label); color: var(--suave); font-size: 12px; text-align: left; flex: 0 0 auto; max-width: 40%; }
  td:not([data-label])::before, td[data-label=""]::before { display: none; }
  td.num { text-align: right; }
  td .acciones { justify-content: flex-end; }
  td input, td select { max-width: 60%; min-width: 0 !important; }
  .chip { white-space: normal; }
  td.vacio { justify-content: center; }
  tr.clic:hover td { background: none; }

  .paginas { justify-content: center; }
  .camp dl { grid-template-columns: 90px 1fr; }

  /* Ventanas a pantalla completa */
  .modal { padding: 0; place-items: stretch; }
  .modal-caja { max-width: none; max-height: none; height: 100%; border-radius: 0; padding: max(20px, env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); }
  .detalle dl { grid-template-columns: 1fr; gap: 2px 0; }
  .detalle dd { margin-bottom: 8px; }
  .acciones .btn { flex: 1; }

  .avisos { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .aviso { max-width: none; }
}

/* Móviles pequeños (iPhone SE, Android compactos) */
@media (max-width: 380px) {
  .cabecera .marca small { display: none; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi b { font-size: 21px; }
  .kpi small { font-size: 11px; }
  .pastilla { font-size: 13px; }
  .filtros label { min-width: 100%; }
  td { flex-wrap: wrap; }
  td::before { max-width: 100%; }
}

/* Tablets en vertical */
@media (min-width: 801px) and (max-width: 1100px) {
  .dos { grid-template-columns: 1fr; }
  main { padding: 16px; }
}