/* ------------------------------------------------------------------
   API TimeCheck - Documentacion
   Tema claro, editorial y limpio. Sin dependencias ni CDN:
   usa "Inter" si el sistema la tiene y, si no, tipografia del sistema.
   Paleta sobre el azul de marca de TimeCheck (#1e3a8a / #4a6cf7).
------------------------------------------------------------------ */
:root{
  --bg:#eef1f6;          /* fondo suave, sin blanco cegador */
  --bg2:#e6eaf2;         /* lateral y rellenos, un punto mas hondo */
  --panel:#fbfcfe;       /* tarjetas: casi blanco, para que levanten sin deslumbrar */
  --borde:#dbe0ea;
  --borde2:#e6eaf2;
  --texto:#2b303d;       /* gris muy oscuro, no negro puro */
  --suave:#586074;
  --tenue:#88909f;
  --acento:#34459a;
  --acento2:#4f6ae4;
  --acentoSuave:#e7ebfa;
  --get:#4f6ae4;
  --getSuave:#e7ebfa;
  --ok:#14795a;
  --error:#c0392b;
  --aviso:#916400;
  --codigo:#e9edf4;      /* bloques de codigo con tinte gris suave */
  --sombra:0 1px 2px rgba(40,45,70,.05);
  --sombraCard:0 1px 3px rgba(40,45,70,.06), 0 1px 2px rgba(40,45,70,.04);
  --sansSerif:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--texto);
     font:15.5px/1.65 var(--sansSerif);
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--acento2);text-decoration:none}
a:hover{text-decoration:underline}
code,pre{font-family:var(--mono)}
code{background:var(--codigo);padding:.14em .42em;border-radius:5px;font-size:.86em;color:#334}
pre{background:var(--codigo);border:1px solid var(--borde);border-radius:10px;padding:16px 18px;
    overflow:auto;font-size:12.5px;line-height:1.65;margin:0}
pre code{background:none;padding:0;font-size:inherit;color:inherit}

/* ---------- estructura ---------- */
.disposicion{display:flex;min-height:100vh}
.lateral{width:284px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--borde);
    position:sticky;top:0;height:100vh;overflow-y:auto;padding:26px 0}
.principal{flex:1;min-width:0;padding:48px 56px 100px;max-width:1080px;margin:0 auto}
@media (max-width:900px){
  .lateral{display:none}
  .principal{padding:26px 20px 70px}
}

/* ---------- lateral ---------- */
.marca{padding:0 24px 20px;border-bottom:1px solid var(--borde);margin-bottom:16px}
.marca strong{display:block;font-size:16px;font-weight:800;letter-spacing:-.01em}
.marca span{font-size:12px;color:var(--tenue)}
.buscador{padding:0 18px 16px}
.buscador input{width:100%;padding:9px 12px;border:1px solid var(--borde);border-radius:9px;
    background:var(--panel);color:var(--texto);font-size:13.5px;font-family:inherit}
.buscador input:focus{outline:none;border-color:var(--acento2);box-shadow:0 0 0 3px var(--acentoSuave)}
.navGrupo{margin-bottom:10px}
.navTitulo{padding:10px 24px 6px;font-size:11px;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;color:var(--tenue)}
.navEnlace{display:flex;gap:9px;align-items:center;padding:6px 24px;font-size:13px;
    color:var(--suave);text-decoration:none;border-left:2px solid transparent}
.navEnlace:hover{background:var(--acentoSuave);color:var(--acento);text-decoration:none}
.navMetodo{font-size:9.5px;font-weight:800;color:var(--get);flex-shrink:0;width:26px;letter-spacing:.03em}
.navRuta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:12px}

/* ---------- cabecera ---------- */
h1{font-size:34px;margin:0 0 8px;letter-spacing:-.025em;font-weight:800;line-height:1.15}
.version{display:inline-block;background:var(--acentoSuave);color:var(--acento);
    font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px;vertical-align:middle;margin-left:10px}
.servidor{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--borde);
    border-radius:12px;padding:14px 16px;margin:22px 0 34px;font-size:13px;flex-wrap:wrap}
.servidor label{color:var(--tenue);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.servidor input{flex:1;min-width:240px;border:1px solid var(--borde);border-radius:8px;padding:8px 11px;
    background:var(--panel);color:var(--texto);font-family:var(--mono);font-size:12.5px}
.servidor input:focus{outline:none;border-color:var(--acento2);box-shadow:0 0 0 3px var(--acentoSuave)}

/* ---------- markdown del info ---------- */
.md{font-size:15.5px;color:#2a3042;max-width:76ch}
.md h2{font-size:19px;font-weight:800;letter-spacing:-.01em;margin:34px 0 12px;padding-bottom:8px;
    border-bottom:1px solid var(--borde)}
.md p{margin:0 0 14px}
.md ul{margin:0 0 14px;padding-left:22px}
.md li{margin-bottom:6px}
.md table{border-collapse:separate;border-spacing:0;margin:0 0 16px;font-size:14px;width:100%;
    border:1px solid var(--borde);border-radius:10px;overflow:hidden}
.md th,.md td{border-bottom:1px solid var(--borde);padding:9px 13px;text-align:left}
.md tr:last-child td{border-bottom:0}
.md th{background:var(--bg2);font-weight:700;font-size:12.5px}

/* ---------- secciones ---------- */
.seccion{margin-top:56px}
.seccion > h2{font-size:23px;margin:0 0 5px;letter-spacing:-.02em;font-weight:800}
.seccion > .desc{color:var(--suave);margin:0 0 20px;font-size:14.5px;max-width:76ch}

/* ---------- operaciones ---------- */
.op{border:1px solid var(--borde);border-radius:12px;margin-bottom:12px;background:var(--panel);
    overflow:hidden;box-shadow:var(--sombraCard);transition:border-color .15s,box-shadow .15s}
.op:hover{box-shadow:0 4px 12px rgba(23,26,43,.07)}
.op.abierta{border-color:#c9d1f4}
.opCabecera{display:flex;align-items:center;gap:14px;padding:15px 18px;cursor:pointer;user-select:none}
.opCabecera:hover{background:var(--bg2)}
.metodo{background:var(--get);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;
    padding:5px 11px;border-radius:7px;flex-shrink:0}
.ruta{font-family:var(--mono);font-size:14px;font-weight:600;flex-shrink:0;color:var(--texto)}
.resumen{color:var(--suave);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flecha{margin-left:auto;color:var(--tenue);font-size:11px;flex-shrink:0;transition:transform .15s}
.op.abierta .flecha{transform:rotate(90deg)}
.opCuerpo{display:none;padding:6px 18px 22px;border-top:1px solid var(--borde2)}
.op.abierta .opCuerpo{display:block}
.opDesc{color:var(--suave);font-size:14.5px;margin:16px 0 4px;max-width:76ch}

h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--tenue);
   margin:26px 0 10px;font-weight:700}

/* ---------- tablas ---------- */
.tabla{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;
    border:1px solid var(--borde);border-radius:10px;overflow:hidden}
.tabla th{text-align:left;padding:9px 12px;background:var(--bg2);border-bottom:1px solid var(--borde);
    font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--tenue);font-weight:700}
.tabla td{padding:10px 12px;border-bottom:1px solid var(--borde2);vertical-align:top}
.tabla tr:last-child td{border-bottom:0}
.nombreCampo{font-family:var(--mono);font-weight:600;font-size:12.5px;white-space:nowrap;color:var(--texto)}
.tipo{color:var(--acento);font-family:var(--mono);font-size:12px;white-space:nowrap}
.obligatorio{color:var(--error);font-size:10.5px;font-weight:700;display:block;margin-top:2px}
.notaCampo{color:var(--suave);font-size:13px}
.anidado{padding-left:16px;border-left:2px solid var(--borde);margin:8px 0 2px}

/* ---------- probar ---------- */
.probador{background:var(--bg2);border:1px solid var(--borde);border-radius:12px;padding:16px;margin-top:14px}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:14px}
.campos label{display:block;font-size:11px;font-weight:700;color:var(--tenue);margin-bottom:4px;
    text-transform:uppercase;letter-spacing:.04em}
.campos input,.campos select{width:100%;padding:8px 10px;border:1px solid var(--borde);border-radius:8px;
    background:var(--panel);color:var(--texto);font-size:13px;font-family:inherit}
.campos input:focus,.campos select:focus{outline:none;border-color:var(--acento2);box-shadow:0 0 0 3px var(--acentoSuave)}
.botonera{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
button{font-family:inherit;cursor:pointer}
.btn{background:var(--acento2);color:#fff;border:0;border-radius:8px;padding:9px 20px;font-size:13.5px;font-weight:600;
    box-shadow:0 1px 2px rgba(74,108,247,.25)}
.btn:hover{background:#3a5cf0}
.btn2{background:var(--panel);color:var(--suave);border:1px solid var(--borde);border-radius:8px;padding:9px 15px;font-size:13px}
.btn2:hover{border-color:var(--acento2);color:var(--acento2)}
.urlPrevia{font-family:var(--mono);font-size:11.5px;color:var(--tenue);margin-top:12px;word-break:break-all}
.resultado{margin-top:14px;display:none}
.resultado.visible{display:block}
.estadoLinea{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:9px;font-size:12.5px;color:var(--suave)}
.chip{font-weight:700;padding:3px 11px;border-radius:20px;font-size:11.5px}
.chip.ok{background:#e6f6ee;color:var(--ok)}
.chip.mal{background:#fde8e8;color:var(--error)}
.resultado pre{max-height:440px}

/* ---------- pestanas ---------- */
.pestanas{display:flex;gap:4px;border-bottom:1px solid var(--borde);margin-bottom:14px}
.pestana{background:none;border:0;border-bottom:2px solid transparent;padding:8px 14px;
    font-size:12.5px;color:var(--suave);margin-bottom:-1px;font-weight:500}
.pestana.activa{color:var(--acento2);border-bottom-color:var(--acento2);font-weight:700}

.panelPestana{display:none}
.panelPestana.activo{display:block}

/* ---------- json coloreado (tema claro) ---------- */
.jClave{color:var(--acento)} .jTexto{color:#1a7f52} .jNum{color:#b2560a}
.jBool{color:#7c3aed} .jNulo{color:var(--tenue)}

.cargando{padding:70px 0;text-align:center;color:var(--tenue)}
.fallo{border-left:3px solid var(--error);background:var(--bg2);padding:16px 20px;border-radius:0 10px 10px 0}
.oculto{display:none !important}