/* Pegasus Panda API - panel y documentacion */

:root {
    --tinta:      #1b2029;
    --tinta-flojo:#5b6472;
    --borde:      #e3e7ee;
    --fondo:      #f4f6f9;
    --papel:      #ffffff;
    /* El celeste del logo de Pegasus, para que el panel sea de la familia. */
    --acento:     #47a0d8;
    --acento-hondo:#2f7fb4;
    --acento-suave:#eaf4fb;
    --ok:         #1a7f37;
    --error:      #c1121f;
    --codigo-fondo:#1b2029;
    --codigo-tinta:#e6edf3;
    --sombra:     0 1px 2px rgba(27,32,41,.05), 0 4px 12px rgba(27,32,41,.05);
    --sombra-alta:0 4px 8px rgba(27,32,41,.07), 0 12px 32px rgba(27,32,41,.10);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font: 15px/1.55 "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------- barra */
.barra {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 24px;
    height: 58px;
    background: var(--tinta);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 12px rgba(27,32,41,.18);
}
.barra .marca {
    display: flex; align-items: center; gap: 10px;
    color: #fff; font-size: 16px; letter-spacing: .2px; white-space: nowrap;
}
.barra .marca img { height: 26px; width: 26px; display: block; flex: none; }
.barra .marca strong { font-weight: 600; }
.barra nav { display: flex; align-items: center; gap: 18px; flex: 1; }
.barra nav a {
    color: #c3cbd6; font-size: 14px; padding: 6px 10px; border-radius: 6px;
    transition: background .12s, color .12s;
}
.barra nav a:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }
.barra nav .sep { width: 1px; height: 18px; background: #3a4250; }
.barra .sesion { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.barra .usuario { color: #fff; }
.barra .cliente {
    display: inline-block; margin-left: 6px; padding: 1px 7px;
    background: #3a4250; border-radius: 10px; color: #c3cbd6; font-size: 11px;
}
.barra .salir { color: #c3cbd6; }

main { max-width: 1080px; margin: 28px auto 60px; padding: 0 24px; }
main.ancho { max-width: 1400px; }

footer {
    max-width: 1080px; margin: 0 auto 40px; padding: 0 24px;
    color: var(--tinta-flojo); font-size: 12px;
}

/* ---------------------------------------------------------- texto */
h1 { font-size: 24px; margin: 0 0 4px; font-weight: 600; }
h2 { font-size: 18px; margin: 32px 0 10px; font-weight: 600; }
h3 { font-size: 15px; margin: 22px 0 8px; font-weight: 600; }
.bajada { color: var(--tinta-flojo); margin: 0 0 24px; }

.tarjeta {
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 20px 22px;
    margin-bottom: 18px;
    box-shadow: var(--sombra);
}

/* ---------------------------------------------------------- codigo */
code {
    background: #eceff4; padding: 1px 5px; border-radius: 4px;
    font-family: Consolas, "Courier New", monospace; font-size: 13px;
}
pre {
    background: var(--codigo-fondo); color: var(--codigo-tinta);
    padding: 14px 16px; border-radius: 8px; overflow-x: auto;
    font-family: Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.5;
    margin: 10px 0;
}
pre code { background: none; padding: 0; color: inherit; font-size: inherit; }

.ruta {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: Consolas, "Courier New", monospace; font-size: 14px;
}
.verbo {
    display: inline-block; padding: 2px 9px; border-radius: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .5px; color: #fff;
}
.verbo.get  { background: #1f6feb; }
.verbo.post { background: #1a7f37; }
.pastilla {
    display: inline-block; padding: 1px 8px; border-radius: 10px;
    font-size: 11px; border: 1px solid var(--borde); color: var(--tinta-flojo);
}
.pastilla.apagado { background: #fff4e5; border-color: #f0c48a; color: #8a5300; }

/* ---------------------------------------------------------- tablas */
table.grilla {
    width: 100%; border-collapse: collapse; background: var(--papel);
    border: 1px solid var(--borde); border-radius: 10px; overflow: hidden;
    box-shadow: var(--sombra);
}
table.grilla th, table.grilla td {
    text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--borde);
    font-size: 13px; vertical-align: top;
}
table.grilla th {
    background: #f7f9fc; font-weight: 600; color: var(--tinta-flojo);
    text-transform: uppercase; font-size: 11px; letter-spacing: .4px;
}
table.grilla tbody tr:hover td, table.grilla tr:hover td { background: #fafcfe; }
table.grilla tr:last-child td { border-bottom: none; }
table.grilla td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grilla .mono { font-family: Consolas, "Courier New", monospace; font-size: 12px; }

.estado-error { color: var(--error); font-weight: 600; }
.estado-ok { color: var(--ok); }
.apagada td { color: #97a0ad; }

/* ---------------------------------------------------------- formularios */
.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.campo .ayuda { display: block; font-size: 12px; color: var(--tinta-flojo); margin-top: 3px; }

input[type=text], input[type=password], select, textarea {
    width: 100%; padding: 9px 11px; border: 1px solid var(--borde);
    border-radius: 7px; font: inherit; font-size: 14px; background: #fff; color: var(--tinta);
    transition: border-color .12s, box-shadow .12s;
}
textarea { font-family: Consolas, "Courier New", monospace; font-size: 13px; resize: vertical; }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px #d7ebf8;
}
input::placeholder, textarea::placeholder { color: #a8b1bd; }

.chk { display: flex; align-items: center; gap: 7px; font-size: 14px; margin-bottom: 10px; }
.chk input { width: auto; }

.boton, input[type=submit] {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 18px; border: 1px solid transparent;
    border-radius: 7px; background: var(--acento); color: #fff;
    font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
    text-decoration: none; transition: background .12s, box-shadow .12s, transform .06s;
    box-shadow: 0 1px 2px rgba(27,32,41,.10);
}
.boton:hover { background: var(--acento-hondo); text-decoration: none; color: #fff; }
.boton:active { transform: translateY(1px); }
.boton:focus-visible { outline: 3px solid #bcdcf3; outline-offset: 1px; }
.boton.suave { background: #fff; color: var(--tinta); border-color: var(--borde); }
.boton.suave:hover { background: #f2f5f9; color: var(--tinta); }
.boton.riesgo { background: #fff; color: var(--error); border-color: #f0b8bc; }
.boton.riesgo:hover { background: #fdeff0; color: var(--error); }
.acciones { display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; }

/* ---------------------------------------------------------- spinner */
/* Lo usa pegasus-busy-button.js. Sin libreria de iconos: es un borde
   con un lado de otro color, girando. */
@keyframes pg-girar { to { transform: rotate(360deg); } }

.spinner {
    display: inline-block; width: 14px; height: 14px; flex: none;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pg-girar .6s linear infinite;
}
.boton.suave .spinner, .boton.riesgo .spinner {
    border-color: rgba(27,32,41,.2); border-top-color: var(--tinta);
}

.boton.ocupado { pointer-events: none; opacity: .75; }

/* Un <input> no admite hijos, asi que ahi el spinner va como fondo. */
.boton.ocupado-input {
    pointer-events: none; opacity: .75;
    padding-left: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='6' stroke-opacity='.4'/%3E%3Cpath d='M8 2a6 6 0 0 1 6 6'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 13px center;
}

/* Barra de progreso indeterminada, para esperas largas (el catalogo entero). */
.cargando {
    height: 3px; border-radius: 3px; overflow: hidden;
    background: var(--acento-suave); margin: 14px 0 0;
}
.cargando::after {
    content: ''; display: block; height: 100%; width: 40%;
    background: var(--acento); border-radius: 3px;
    animation: pg-avanzar 1.1s ease-in-out infinite;
}
@keyframes pg-avanzar {
    0%   { margin-left: -40%; }
    100% { margin-left: 100%; }
}

.filtros { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.filtros .campo { margin-bottom: 0; min-width: 170px; }

/* ---------------------------------------------------------- avisos */
.aviso {
    display: block; padding: 10px 14px; border-radius: 6px;
    margin-bottom: 16px; font-size: 14px; border: 1px solid;
}
.aviso.ok    { background: #eaf6ec; border-color: #b7dfc0; color: var(--ok); }
.aviso.error { background: #fdecee; border-color: #f4bfc4; color: var(--error); }

.token-nuevo {
    background: #fffbe6; border: 1px solid #ffe08a; border-radius: 8px;
    padding: 16px 18px; margin-bottom: 18px;
}
.token-nuevo .valor {
    display: block; margin: 10px 0 0; padding: 10px 12px;
    background: var(--codigo-fondo); color: var(--codigo-tinta); border-radius: 6px;
    font-family: Consolas, "Courier New", monospace; font-size: 13px; word-break: break-all;
}

/* ---------------------------------------------------------- login */
body.login {
    display: flex; align-items: center; justify-content: center; min-height: 100vh;
    /* Un degradado muy suave del celeste de la marca, para que no sea un gris plano. */
    background: radial-gradient(1200px 600px at 50% -10%, #e8f3fb 0%, var(--fondo) 60%);
}
.caja-login {
    width: 360px; background: var(--papel); border: 1px solid var(--borde);
    border-radius: 14px; padding: 32px;
    box-shadow: var(--sombra-alta);
}
.caja-login .logo { display: block; height: 52px; width: 52px; margin: 0 auto 20px; }
.caja-login h1 { font-size: 19px; margin-bottom: 2px; text-align: center; }
.caja-login .bajada { font-size: 13px; margin-bottom: 22px; text-align: center; }
.caja-login .boton { width: 100%; margin-top: 8px; padding: 11px 18px; }

/* ---------------------------------------------------------- indice de endpoints */
.endpoints { display: grid; gap: 12px; }
.endpoint {
    display: block; background: var(--papel); border: 1px solid var(--borde);
    border-radius: 8px; padding: 14px 18px; color: inherit;
}
.endpoint:hover { border-color: var(--acento); text-decoration: none; }
.endpoint .descripcion { color: var(--tinta-flojo); font-size: 13px; margin-top: 5px; }

.vacio { color: var(--tinta-flojo); font-style: italic; padding: 14px 0; }

/* ============================================================
   Responsive

   El CSS venia de un panel que solo se usaba en escritorio y no
   traia una sola media query. Cuatro cosas se rompian en angosto:
   la barra superior (marca + nav + sesion en una fila de 58px de
   alto), las tablas de datos, la caja de login clavada en 360px, y
   los bloques de codigo con URLs largas.
   ============================================================ */

/* El codigo scrollea solo: un curl largo no tiene que estirar la pagina. */
pre { overflow-x: auto; }

/* Las celdas cortan las tiradas sin espacios. Sin esto, el QueryString
   de un log (1172px de una sola palabra) estiraba la tabla a 1739px
   dentro de un main de 1080 y la pagina entera scrolleaba en horizontal,
   tambien en escritorio. */
table.grilla td, table.grilla th { overflow-wrap: anywhere; word-break: break-word; }

@media (max-width: 900px) {
    /* La barra pasa a dos lineas: marca + sesion arriba, navegacion
       abajo. En una sola fila los links se pisaban con el usuario. */
    .barra {
        height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 8px 14px;
        align-items: center;
    }
    .barra .marca { order: 1; }
    .barra .sesion { order: 2; margin-left: auto; }
    .barra nav {
        order: 3; flex-basis: 100%; flex: 0 0 100%;
        gap: 4px 10px; flex-wrap: wrap;
        padding-top: 6px; border-top: 1px solid rgba(255,255,255,.10);
    }
    .barra nav a { padding: 6px 8px; }
    /* El separador vertical no tiene sentido si los links envuelven. */
    .barra nav .sep { display: none; }

    main, footer { padding: 0 16px; }
    main { margin-top: 20px; }

    /* Las tablas no caben: se scrollean dentro de su contenedor.
       El display:block las saca del layout de tabla, que ignora
       overflow-x. */
    table.grilla { display: block; overflow-x: auto; white-space: nowrap; }
    table.grilla td, table.grilla th { white-space: normal; }

    .filtros .campo { min-width: 140px; flex: 1 1 140px; }
}

@media (max-width: 560px) {
    h1 { font-size: 21px; }
    h2 { font-size: 17px; margin-top: 26px; }

    main, footer { padding: 0 12px; }

    /* La caja de login estaba en 360px fijos: en un telefono de 360
       de ancho quedaba pegada a los bordes o se desbordaba con el
       padding. */
    body.login { align-items: flex-start; padding: 24px 12px; }
    .caja-login { width: 100%; max-width: 380px; padding: 24px 20px; }

    /* Los botones de una accion ocupan el ancho: son mas faciles de
       tocar y no quedan tres apretados en una linea. */
    .acciones { gap: 8px; }
    .acciones .boton, .acciones a.boton { flex: 1 1 auto; text-align: center; }

    /* Con los 8 links del admin la navegacion se iba a 4 lineas y la
       barra ocupaba media pantalla. Se achica la tipografia y el aire
       en vez de esconder links detras de un scroll horizontal, que
       nadie descubre. */
    .barra nav { gap: 2px 6px; padding-top: 4px; }
    .barra nav a { font-size: 13px; padding: 5px 7px; }

    /* El token generado es una tirada larga sin espacios. */
    .token-nuevo .valor { font-size: 12px; }
    pre, pre code { font-size: 12px; }
}

/* La respuesta del probador: el JSON ya viene indentado del servidor, pero
   un valor de texto largo -- una evolucion en HTML, por ejemplo -- sigue
   siendo una linea sola. Que corte, en vez de obligar a scrollear al costado. */
pre.respuesta {
    white-space: pre-wrap; word-break: break-word;
    max-height: 560px; overflow-y: auto;
}