/* ============================================================================
   KUVE Soporte — hoja de estilo de la pagina publica
   Fuente de verdad: D:\Calude\Kuve\20-SERVICIOS\despliegue\tia-control\soporte\public\
   En el nodo: /opt/tia/caddy/public/assets/style.css

   Criterio: sobria, industrial, sin adornos. Quien lee esto puede ser una persona
   mayor con el telefono en la oreja, en un portatil de 1366x768. Por eso la
   tipografia es grande, el contraste alto y el boton de copiar es, sin discusion,
   el elemento mas evidente de la pantalla y entra sin hacer scroll.

   Sin fuentes externas: la CSP del sitio es 'self' y una fuente remota quedaria
   bloqueada. Pila del sistema, que ademas carga instantaneamente.
   ============================================================================ */

:root {
  --fondo:        #f4f5f6;
  --panel:        #ffffff;
  --texto:        #16191c;
  --texto-suave:  #4a5158;
  --borde:        #d3d7db;
  --acento:       #0b5cab;   /* azul de ingenieria, no de startup */
  --acento-alto:  #084a8c;
  --ok:           #1a6b3c;
  --aviso-fondo:  #fdf6e3;
  --aviso-borde:  #d9b64a;
  --foco:         #b3541e;   /* distinto del acento: el foco debe verse SOBRE el boton */
  --codigo-fondo: #eceef0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo:        #14171a;
    --panel:        #1c2024;
    --texto:        #eef1f3;
    --texto-suave:  #b3bcc4;
    --borde:        #333a41;
    --acento:       #4c9bec;
    --acento-alto:  #6fb2f5;
    --ok:           #56c98a;
    --aviso-fondo:  #2c2617;
    --aviso-borde:  #8a7226;
    --foco:         #ffa25c;
    --codigo-fondo: #24292e;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 1rem 3rem;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.55;
}

/* Todo el contenido en una columna centrada y estrecha: leer una linea larga
   mientras se habla por telefono es justo lo que no queremos. */
.cabecera, main, .pie { max-width: 46rem; margin: 0 auto; }

/* ---------------------------------------------------------------- cabecera */
.cabecera { padding: 2rem 0 1rem; border-bottom: 1px solid var(--borde); }
.marca {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--texto);
}
.sub { margin: 0.15rem 0 0; color: var(--texto-suave); font-size: 1rem; }

/* ---------------------------------------------------------------- contenido */
main { padding-top: 1.6rem; }

h1 {
  margin: 0 0 1rem;
  font-size: 2.1rem;
  line-height: 1.2;
  font-weight: 700;
}

.que-pasa {
  margin: 0 0 1.8rem;
  padding: 0 0 0 1.2rem;
  color: var(--texto-suave);
}
.que-pasa li { margin-bottom: 0.35rem; }
.que-pasa strong { color: var(--texto); }

/* ---------------------------------------------------------------- boton
   Es un <button> real, no un <div> con onclick: el teclado, el lector de
   pantalla y el navegador ya saben lo que es un boton. */
.boton {
  display: block;
  width: 100%;
  padding: 1.15rem 1rem;
  border: none;
  border-radius: 6px;
  background: var(--acento);
  color: #ffffff;
  font: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease;
}
.boton:hover  { background: var(--acento-alto); }
.boton:active { transform: translateY(1px); }
.boton:focus-visible {
  /* Contorno en un color propio y separado del boton: sobre un fondo azul, un
     contorno azul no se ve, que es como se pierde la navegacion por teclado. */
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}
.boton[data-estado="ok"]    { background: var(--ok); }
.boton[data-estado="fallo"] { background: var(--aviso-borde); color: #16191c; }

.aviso-copia {
  min-height: 1.5rem;   /* reservado siempre: sin esto la pagina "salta" al copiar */
  margin: 0.5rem 0 1.4rem;
  font-size: 0.95rem;
  color: var(--texto-suave);
}

/* ---------------------------------------------------------------- pasos */
.pasos {
  margin: 0 0 1.6rem;
  padding: 1.1rem 1.2rem 1.1rem 2.6rem;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 6px;
  font-size: 1.2rem;
}
.pasos li { margin-bottom: 0.55rem; }
.pasos li:last-child { margin-bottom: 0; }

kbd {
  display: inline-block;
  padding: 0.12em 0.5em;
  border: 1px solid var(--borde);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--codigo-fondo);
  color: var(--texto);
  font-family: inherit;
  font-size: 0.92em;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- comando */
.pie-comando { margin: 0 0 0.35rem; font-size: 0.92rem; color: var(--texto-suave); }

.comando {
  margin: 0 0 1.8rem;
  padding: 0.85rem 1rem;
  background: var(--codigo-fondo);
  border: 1px solid var(--borde);
  border-radius: 6px;
  /* El comando es largo y no se puede partir: se desplaza dentro de su caja en
     lugar de hacer que la pagina entera se mueva en horizontal. */
  overflow-x: auto;
  font-family: Consolas, "Courier New", ui-monospace, monospace;
  font-size: 0.95rem;
  user-select: all;   /* un solo clic lo selecciona entero */
}

/* ---------------------------------------------------------------- plan B */
.plan-b {
  margin: 0 0 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 6px;
}
.plan-b summary { cursor: pointer; font-weight: 600; }
.plan-b summary:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.plan-b-cuerpo { margin-top: 0.9rem; }
.plan-b-cuerpo p { margin: 0 0 0.8rem; }

.enlace-exe { color: var(--acento); font-weight: 600; }

.advertencia {
  padding: 0.8rem 1rem;
  background: var(--aviso-fondo);
  border-left: 4px solid var(--aviso-borde);
  border-radius: 3px;
}
.por-que { font-size: 0.92rem; color: var(--texto-suave); }

/* ---------------------------------------------------------------- pie */
.pie {
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--borde);
  font-size: 0.92rem;
  color: var(--texto-suave);
}
.pie p { margin: 0 0 0.5rem; }
.privacidad strong { color: var(--texto); }

/* ---------------------------------------------------------------- pantallas
   Portatil ancho pero bajo (1366x768 es el caso mayoritario en cliente): se
   aprieta el vertical para que boton y pasos entren sin scroll. No se toca el
   movil, donde el scroll es normal y encoger la letra seria peor. */
@media (min-width: 900px) and (max-height: 820px) {
  .cabecera { padding-top: 1.2rem; }
  h1        { font-size: 1.8rem; margin-bottom: 0.7rem; }
  .que-pasa { margin-bottom: 1.1rem; }
  .pasos    { padding-top: 0.85rem; padding-bottom: 0.85rem; }
  .comando  { margin-bottom: 1.1rem; }
}

@media (max-width: 480px) {
  body   { font-size: 17px; }
  h1     { font-size: 1.7rem; }
  .boton { font-size: 1.15rem; padding: 1rem 0.75rem; }
  .pasos { font-size: 1.05rem; }
}

/* Respeta a quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .boton:active { transform: none; }
}