/* Panel del sniffer. Mismo lenguaje visual que el área de administración de Dofus Builder
   (frontend/src/config/theme.ts, colors.ts, typography.ts). */

@font-face { font-family: Roboto; font-weight: 400; font-display: swap; src: url(/estatico/fuentes/roboto-400.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-weight: 500; font-display: swap; src: url(/estatico/fuentes/roboto-500.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-weight: 600; font-display: swap; src: url(/estatico/fuentes/roboto-600.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-weight: 700; font-display: swap; src: url(/estatico/fuentes/roboto-700.woff2) format("woff2"); }

.tema-claro {
  --fondo: #E6EDEE; --fondo-neutro: #F4F7F7; --papel: #FFFFFF; --panel: rgba(255, 255, 255, 0.72);
  --texto: rgba(0, 0, 0, 0.87); --texto-2: rgba(0, 0, 0, 0.6); --texto-3: rgba(0, 0, 0, 0.38); --icono: rgba(0, 0, 0, 0.54);
  --borde: rgba(0, 0, 0, 0.12); --borde-tabla: rgba(224, 224, 224, 1); --borde-boton: rgba(0, 0, 0, 0.23); --borde-fuerte: rgba(0, 0, 0, 0.87);
  --hover: rgba(0, 0, 0, 0.04); --subrayado: rgba(0, 0, 0, 0.42); --pre: rgba(0, 0, 0, 0.04);
  --primario: #0F4C5C; --primario-hover: #0C3D4A; --primario-texto: #0F4C5C; --primario-suave: rgba(15, 76, 92, 0.08); --primario-hover-suave: rgba(15, 76, 92, 0.04);
  --barra: #0F4C5C; --menu: #FFFFFF; --dialogo: #FFFFFF; --velo: rgba(0, 0, 0, 0.5);
  --deshabilitado: rgba(0, 0, 0, 0.26); --deshabilitado-fondo: rgba(0, 0, 0, 0.12);
  --error: #D32F2F; --error-hover: #C62828; --ok: #2E7D32; --info: #0288D1; --secundario: #B5179E;
  --chip-borde: #BDBDBD;
  --alerta-ok-fondo: #EDF7ED; --alerta-ok-texto: #1E4620;
  --alerta-info-fondo: #E5F6FD; --alerta-info-texto: #014361;
  --alerta-aviso-fondo: #FFF4E5; --alerta-aviso-texto: #663C00; --alerta-aviso-icono: #ED6C02;
  --alerta-error-fondo: #FDEDED; --alerta-error-texto: #5F2120;
  --aviso-fondo: #313131; --aviso-texto: #FFFFFF;
  --switch-riel: rgba(0, 0, 0, 0.38); --switch-perilla: #FAFAFA;
  --sombra-tarjeta: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
  color-scheme: light;
}
.tema-oscuro {
  --fondo: #131B1F; --fondo-neutro: #101619; --papel: #182126; --panel: rgba(24, 33, 38, 0.72);
  --texto: #E6EDEF; --texto-2: #9FB0B5; --texto-3: #63757A; --icono: #9FB0B5;
  --borde: rgba(255, 255, 255, 0.12); --borde-tabla: rgba(255, 255, 255, 0.12); --borde-boton: rgba(255, 255, 255, 0.23); --borde-fuerte: #E6EDEF;
  --hover: rgba(255, 255, 255, 0.08); --subrayado: rgba(255, 255, 255, 0.7); --pre: rgba(255, 255, 255, 0.06);
  --primario: #3F707D; --primario-hover: #0F4C5C; --primario-texto: #6A9AA7; --primario-suave: rgba(63, 112, 125, 0.24); --primario-hover-suave: rgba(106, 154, 167, 0.08);
  --barra: #3F707D; --menu: #343C40; --dialogo: #3D4549; --velo: rgba(0, 0, 0, 0.6);
  --deshabilitado: rgba(255, 255, 255, 0.3); --deshabilitado-fondo: rgba(255, 255, 255, 0.12);
  --error: #EF5350; --error-hover: #D32F2F; --ok: #4CAF50; --info: #03A9F4; --secundario: #C445B1;
  --chip-borde: #616161;
  --alerta-ok-fondo: #0C130D; --alerta-ok-texto: #CCE8CD;
  --alerta-info-fondo: #071318; --alerta-info-texto: #B8E7FB;
  --alerta-aviso-fondo: #191207; --alerta-aviso-texto: #FFE2B7; --alerta-aviso-icono: #FF9800;
  --alerta-error-fondo: #160B0B; --alerta-error-texto: #F4C7C7;
  --aviso-fondo: #CFD0D1; --aviso-texto: rgba(0, 0, 0, 0.87);
  --switch-riel: rgba(255, 255, 255, 0.3); --switch-perilla: #E0E0E0;
  --sombra-tarjeta: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); }
body { font-family: Roboto, "Segoe UI", system-ui, sans-serif; color: var(--texto); -webkit-font-smoothing: antialiased; }
button, input { font-family: inherit; }
a { color: var(--primario-texto); } a:hover { color: var(--primario-hover); }
[hidden] { display: none !important; }
.raiz { min-height: 100vh; min-height: 100dvh; }
.mono { font-family: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.oculto-movil { }
@media (max-width: 600px) { .oculto-movil { display: none; } }

/* ─── Tipografía ─── */
.t-h4 { font-size: 24px; font-weight: 600; line-height: 125%; letter-spacing: -0.24px; }
.t-h6 { font-size: 18px; font-weight: 600; line-height: 135%; }
.t-sub1 { font-size: 18px; font-weight: 700; line-height: 150%; }
.t-body1 { font-size: 16px; line-height: 150%; }
.t-body2 { font-size: 14px; line-height: 143%; }
.t-caption { font-size: 12px; line-height: 140%; letter-spacing: 0.24px; }
.suave { color: var(--texto-2); }
.tenue { opacity: 0.7; }
.error-texto { color: var(--error); }

/* ─── Botones ─── */
.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; min-width: 100px; padding: 8px 12px; border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 100%; letter-spacing: 0.28px; cursor: pointer; white-space: nowrap; transition: background-color 150ms, box-shadow 150ms, border-color 150ms; }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn-contained { background: var(--primario); color: #FFFFFF; border: 0; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08); }
.btn-contained:hover { background: var(--primario-hover); box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.12); }
.btn-outlined { background: transparent; color: var(--texto); border: 1px solid var(--borde-boton); }
.btn-outlined:hover { background: var(--hover); border-color: var(--borde-fuerte); }
.btn-text { background: transparent; color: var(--primario-texto); border: 0; min-width: 0; padding: 8px 12px; }
.btn-text:hover { background: var(--primario-hover-suave); }
.btn-danger { background: var(--error); color: #FFFFFF; border: 0; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08); }
.btn-danger:hover { background: var(--error-hover); }
.btn-danger-outlined { background: transparent; color: var(--error); border: 1px solid var(--error); }
.btn-danger-outlined:hover { background: var(--hover); }
.btn:disabled, .btn:disabled:hover { cursor: default; color: var(--deshabilitado); background: transparent; box-shadow: none; }
.btn-contained:disabled, .btn-danger:disabled { background: var(--deshabilitado-fondo); }
.btn-outlined:disabled, .btn-danger-outlined:disabled { border-color: var(--deshabilitado-fondo); }
.btn-ancho { width: 100%; }

.bar-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 6px 8px; border: 0; border-radius: 12px; background: transparent; color: inherit; cursor: pointer; font-size: 14px; }
.bar-btn:hover { background: rgba(255, 255, 255, 0.08); }
.bar-btn svg { width: 20px; height: 20px; }

.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--icono); cursor: pointer; text-decoration: none; }
.icon-btn:hover { background: var(--hover); color: var(--texto); }
.icon-btn svg { width: 20px; height: 20px; }

/* ─── Selector de tema ─── */
.modo { display: inline-flex; border-radius: 4px; border: 1px solid var(--borde); overflow: hidden; }
.modo button { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border: 0; border-left: 1px solid var(--borde); background: transparent; color: var(--texto-2); cursor: pointer; }
.modo button:first-child { border-left: 0; }
.modo button:hover { background: var(--hover); }
.modo button svg { width: 18px; height: 18px; }
.modo .activo, .modo .activo:hover { background: var(--primario-suave); color: var(--primario-texto); }
.barra .modo { border-color: rgba(255, 255, 255, 0.23); }
.barra .modo button { color: rgba(255, 255, 255, 0.7); border-left-color: rgba(255, 255, 255, 0.23); }
.barra .modo button:hover { background: rgba(255, 255, 255, 0.08); }
.barra .modo .activo, .barra .modo .activo:hover { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }

/* ─── Chips, alertas ─── */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 16px; font-size: 13px; line-height: 1; white-space: nowrap; }
.chip-success { background: #2E7D32; color: #FFFFFF; }
.chip-info { background: #0288D1; color: #FFFFFF; }
.chip-error { background: #D32F2F; color: #FFFFFF; }
.chip-outlined { border: 1px solid var(--chip-borde); color: var(--texto); }
.chip-outlined-primary { border: 1px solid var(--primario-texto); color: var(--primario-texto); }
.chip-outlined-secondary { border: 1px solid var(--secundario); color: var(--secundario); }
.chip .spinner { width: 12px; height: 12px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #FFFFFF; animation: pulso 1.4s ease-in-out infinite; }
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.alert { display: flex; align-items: flex-start; gap: 12px; padding: 6px 16px; border-radius: 4px; font-size: 14px; line-height: 143%; }
.alert > svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 7px; }
.alert-msg { padding: 8px 0; flex: 1; min-width: 0; white-space: pre-line; overflow-wrap: anywhere; }
.alert-action { display: flex; align-items: center; padding-top: 4px; margin-right: -8px; }
.alert-success { background: var(--alerta-ok-fondo); color: var(--alerta-ok-texto); } .alert-success > svg { color: var(--ok); }
.alert-info { background: var(--alerta-info-fondo); color: var(--alerta-info-texto); } .alert-info > svg { color: var(--info); }
.alert-warning { background: var(--alerta-aviso-fondo); color: var(--alerta-aviso-texto); } .alert-warning > svg { color: var(--alerta-aviso-icono); }
.alert-error { background: var(--alerta-error-fondo); color: var(--alerta-error-texto); } .alert-error > svg { color: var(--error); }
.alert .btn-text { color: inherit; font-size: 13px; min-height: 30px; padding: 4px 8px; }

.spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira 0.8s linear infinite; flex-shrink: 0; display: inline-block; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ─── Inicio de sesión ─── */
.login { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--fondo-neutro); }
.login-esquina { position: absolute; top: 20px; right: 32px; }
.tarjeta { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 24px; padding: 32px; border-radius: 16px; background: var(--papel); box-shadow: var(--sombra-tarjeta); }
.marca-app { display: flex; align-items: center; gap: 12px; }
.logo { width: 40px; height: 40px; border-radius: 10px; background: var(--primario-suave); color: var(--primario-texto); display: flex; align-items: center; justify-content: center; }
.logo svg { width: 24px; height: 24px; }
@media (max-width: 600px) { .login-esquina { right: 16px; top: 12px; } .tarjeta { padding: 24px; } }

/* ─── Barra y página ─── */
.barra { position: sticky; top: 0; z-index: 10; height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 24px; background: var(--barra); color: #FFFFFF; }
.barra-seccion { flex: 1; min-width: 0; font-size: 14px; line-height: 143%; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-logo { width: 26px; height: 26px; border-radius: 7px; background: rgba(255, 255, 255, 0.12); display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; }
.barra-logo svg { width: 18px; height: 18px; }
.barra-titulo { font-size: 14px; font-weight: 700; line-height: 143%; }
.menu-ancla { position: relative; }
.menu { position: absolute; top: 44px; left: 0; min-width: 320px; padding: 12px 0; border-radius: 12px; background: var(--menu); color: var(--texto); box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.12); }
.menu-item { display: flex; align-items: center; width: 100%; padding: 12px 24px; border: 0; background: transparent; color: inherit; font-size: 16px; line-height: 150%; text-align: left; cursor: pointer; }
.menu-item:hover { background: var(--hover); }
.menu-item-sel, .menu-item-sel:hover { background: var(--primario-suave); }
@media (max-width: 600px) { .barra { padding: 0 8px; gap: 4px; } .menu { min-width: 260px; } }

.contenido { max-width: 900px; margin: 0 auto; padding: 24px 24px 48px; display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 600px) { .contenido { padding: 16px 16px 32px; gap: 16px; } }

/* ─── Paneles ─── */
.panel { border: 1px solid var(--borde); border-radius: 4px; background: var(--panel); backdrop-filter: blur(6px); padding: 16px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cabecera { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cabecera-texto { flex: 1; min-width: 240px; display: flex; flex-direction: column; }
.fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.botones { display: flex; gap: 16px; flex-wrap: wrap; }
.botones-fin { display: flex; justify-content: flex-end; gap: 16px; flex-wrap: wrap; }
.columna { display: flex; flex-direction: column; gap: 12px; }

/* ─── Tablas ─── */
.tabla-caja { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 143%; }
.tabla th { text-align: left; font-weight: 500; padding: 6px 16px; border-bottom: 1px solid var(--borde-tabla); white-space: nowrap; }
.tabla td { padding: 6px 16px; border-bottom: 1px solid var(--borde-tabla); vertical-align: middle; }
.tabla .num { text-align: right; white-space: nowrap; }
.tabla .clave { color: var(--texto-2); width: 160px; white-space: nowrap; }
.tabla .nowrap { white-space: nowrap; }
.tabla .acciones { padding-top: 2px; padding-bottom: 2px; }
.tabla .acciones div { display: flex; justify-content: flex-end; gap: 4px; }
.tabla .icono-paso { width: 36px; padding-right: 0; }
.tabla .icono-paso svg { width: 20px; height: 20px; display: block; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .rompe { overflow-wrap: anywhere; }
.fila-pendiente td { color: var(--texto-2); }
.paso-ok { color: var(--ok); }
.paso-error { color: var(--error); }
.paso-curso { color: var(--info); display: block; }

/* ─── Formularios ─── */
.campo { display: flex; flex-direction: column; min-width: 0; }
.campo label { font-size: 12px; line-height: 1.4375em; color: var(--texto-2); letter-spacing: 0.15px; }
.campo input { font: inherit; font-size: 16px; line-height: 1.4375em; padding: 4px 0 5px; margin-top: 3px; border: 0; border-bottom: 1px solid var(--subrayado); background: transparent; color: var(--texto); outline: none; width: 100%; border-radius: 0; }
.campo input:hover { border-bottom: 2px solid var(--borde-fuerte); padding-bottom: 4px; }
.campo input:focus { border-bottom: 2px solid var(--primario-texto); padding-bottom: 4px; }
.campo:focus-within label { color: var(--primario-texto); }
.campo input::placeholder { color: var(--texto-3); }
.campo input.mono { font-family: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 15px; }
.campo .ayuda { font-size: 12px; line-height: 1.66; letter-spacing: 0.4px; color: var(--texto-2); margin-top: 3px; }
.campo .fijo { font-size: 15px; line-height: 1.4375em; padding: 4px 0 5px; margin-top: 3px; border-bottom: 1px dotted var(--subrayado); color: var(--texto-2); }
.campo-error label, .campo-error:focus-within label, .campo-error .ayuda { color: var(--error); }
.campo-error input, .campo-error input:focus, .campo-error input:hover { border-bottom: 2px solid var(--error); padding-bottom: 4px; }
.campo-flex { flex: 1; }
.campo-con-boton { display: flex; align-items: flex-end; gap: 16px; }
.campo-con-boton .btn { margin-bottom: 23px; }
.campo-con-boton .btn-marcar { margin-bottom: 0; }
.formulario { display: flex; flex-direction: column; gap: 24px; padding: 8px 0; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 700px) { .rejilla-3 { grid-template-columns: minmax(0, 1fr); } }

.toggle { display: inline-flex; border: 1px solid var(--borde); border-radius: 4px; overflow: hidden; }
.toggle button { border: 0; border-left: 1px solid var(--borde); background: transparent; padding: 7px 14px; font-size: 14px; font-weight: 500; letter-spacing: 0.4px; color: var(--texto-2); cursor: pointer; }
.toggle button:first-child { border-left: 0; }
.toggle button:hover { background: var(--hover); }
.toggle .activo, .toggle .activo:hover { background: var(--primario-suave); color: var(--primario-texto); }
.explicacion { flex: 1; min-width: 240px; }

.interruptor { display: flex; align-items: flex-start; gap: 4px; margin-left: -12px; }
.switch { position: relative; width: 34px; height: 14px; margin: 5px 12px 0; border-radius: 7px; background: var(--switch-riel); flex-shrink: 0; cursor: pointer; border: 0; padding: 0; }
.switch::after { content: ""; position: absolute; top: -3px; left: -3px; width: 20px; height: 20px; border-radius: 50%; background: var(--switch-perilla); box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12); transition: left 150ms; }
.switch[aria-checked="true"] { background: var(--primario-texto); }
.switch[aria-checked="true"]::after { left: 17px; background: var(--primario); }
.desplegar { align-self: flex-start; margin-left: -12px; }
.flecha { transition: transform 150ms; }
.flecha-abierta { transform: rotate(180deg); }

/* ─── Diagnóstico ─── */
.marcas { display: flex; flex-direction: column; }
.marca { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--borde-tabla); font-size: 14px; }
.marca:last-child { border-bottom: 0; }
.pre { margin: 0; padding: 12px 16px; border-radius: 4px; background: var(--pre); white-space: pre; overflow: auto; font-family: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.6; color: var(--texto); max-height: 420px; }

/* ─── Diálogos y avisos ─── */
.velo { position: fixed; inset: 0; z-index: 20; background: var(--velo); display: flex; align-items: center; justify-content: center; padding: 32px; }
.dialogo { width: 100%; max-width: 444px; max-height: calc(100vh - 64px); display: flex; flex-direction: column; gap: 32px; padding: 32px; border-radius: 16px; background: var(--dialogo); color: var(--texto); box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08); }
.dialogo-ancho { max-width: 900px; }
.dialogo .pre { flex: 1; min-height: 0; max-height: none; }
.dialogo-titulo { display: flex; align-items: flex-start; gap: 16px; }
.dialogo-titulo > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 600px) { .velo { padding: 24px; } .dialogo { padding: 24px; gap: 24px; } }

.aviso { position: fixed; left: 24px; bottom: 24px; z-index: 30; min-width: 288px; max-width: calc(100vw - 48px); padding: 14px 16px; border-radius: 4px; background: var(--aviso-fondo); color: var(--aviso-texto); font-size: 14px; line-height: 143%; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.16); }
.cargando { display: flex; align-items: center; gap: 12px; color: var(--texto-2); font-size: 14px; }