/* ===========================================================================
   Header compartido de Argentina Strike
   Lo usan index.php, descargar.php y agregarservidor.php a traves de header.php
   =========================================================================== */

/* --- COLORES DE LA LISTA DE SERVIDORES ------------------------------------
   Para cambiar los colores se editan SOLO estas cuatro lineas.
   -------------------------------------------------------------------------- */
:root {
    --srv-title:  #FFFFFF;   /* nombre de cada servidor */
    --srv-ip:     #FFFFFF;   /* la IP */
    --srv-hover:  #5BE37A;   /* color al pasar el mouse */
    --srv-copied: #5BE37A;   /* confirmacion al copiar */
}

/* --- Estructura del header ------------------------------------------------ */
.nav-container { background-color: rgba(8, 172, 228, 0.95); z-index: 15; position: relative; }

.flag-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 15px 40px;
}

/* Titulo y bandera toman anchos IGUALES a cada lado (flex: 1 1 0). Asi el
   bloque del medio queda centrado respecto de la pagina y no del espacio
   sobrante, que es lo que lo corria hacia un costado. */
.arg-title-container { flex: 1 1 0; }
.arg-title {
    font-family: "Jersey 10", sans-serif;
    cursor: pointer;
    text-transform: uppercase;
    transition: color .3s ease;
    font-weight: 400;
    font-style: normal;
    font-size: 31px;
    padding: 5px;
    margin-bottom: -5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
/* Bloque central: texto + lista de servidores, centrados como una unidad. */
.header-center {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
}

/* La bandera ocupa el mismo ancho que el titulo (flex: 1 1 0) y alinea su
   imagen contra el borde derecho. 200px es el ancho del sitio original. */
.arg-flag {
    flex: 1 1 0;
    display: flex;
    justify-content: flex-end;
}
.arg-flag img { width: 200px; max-width: 100%; height: auto; display: block; }

/* El texto no crece: ocupa solo lo que necesita, para quedar pegado a la
   lista de servidores dentro del bloque central. */
.ad {
    flex: 0 1 auto;
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    padding: 0 10px;
}

/* --- Lista de servidores con IP copiable ---------------------------------- */
.header-servers {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.13);
}
.hs-item {
    position: relative;
    display: flex;
    align-items: baseline;
    /* Separacion minima entre el nombre y la IP. Es la que se ve en la fila
       mas larga, porque la IP se alinea a la derecha con margin-left:auto. */
    gap: 22px;
    width: 100%;
    padding: 3px 7px;
    border: 0;
    border-radius: 5px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .18s ease;
}
.hs-item:hover,
.hs-item:focus-visible { background: rgba(255, 255, 255, 0.10); }
.hs-item:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

.hs-name {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--srv-title);
    transition: color .18s ease;
}
.hs-ip {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    margin-left: auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--srv-ip);
    transition: color .18s ease;
}
.hs-item:hover .hs-name,
.hs-item:hover .hs-ip,
.hs-item:focus-visible .hs-name,
.hs-item:focus-visible .hs-ip { color: var(--srv-hover); }

/* El aviso se posiciona absoluto para NO reservar ancho: con opacity:0 seguia
   ocupando su espacio y ensanchaba la caja al pedo. Solo aparece al copiar,
   tapando la IP por un momento. El "clic para copiar" ahora es el title del
   boton (tooltip nativo), mas el cursor y el cambio de color al pasar. */
.hs-hint {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    font-weight: 700;
    color: var(--srv-copied);
    transition: opacity .18s ease;
}
.hs-item.copied .hs-hint { opacity: 1; }
.hs-item.copied .hs-ip { visibility: hidden; }

.hs-item.copied .hs-name,
.hs-item.copied .hs-ip { color: var(--srv-copied); }

/* --- Barra de navegacion --------------------------------------------------- */
nav { background-color: rgba(8, 172, 228, 0.9); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); }
.nav-left-items { display: flex; align-items: center; padding: 0 40px; }
.nav-item { display: inline-flex; }
.nav-item a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 25px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: background-color 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.nav-item a:hover { background-color: rgba(255, 255, 255, 0.1); }
.nav-item a.active { background-color: rgba(255, 184, 28, 0.3); color: #FFB81C; }
.nav-item svg { width: 20px; height: 20px; }
.nav-section { width: 1px; }

/* --- Responsive -----------------------------------------------------------
   La regla de 768px existia solo en descargar.php; index.php no la tenia, asi
   que en celular el header de la home se veia peor. Ahora vale para todas.
   Se agrega un corte intermedio en 1100px porque con la lista de servidores
   el header necesita apilarse antes que antes.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .flag-container { flex-wrap: wrap; justify-content: center; text-align: center; }
    .arg-title-container { flex: 0 0 auto; order: 1; }
    .arg-flag { flex: 0 0 auto; order: 2; justify-content: center; }
    /* El bloque central se apila: texto arriba, lista abajo */
    .header-center { flex: 1 1 100%; order: 3; flex-direction: column; gap: 14px; align-items: center; }
    .ad { flex: 0 1 auto; text-align: center; padding: 0; }
}

@media (max-width: 768px) {
    .flag-container { flex-direction: column; gap: 15px; text-align: center; }
    .arg-flag img { width: 150px; }
    .header-servers { width: 100%; max-width: 420px; }
    .hs-item { gap: 8px; }
    .hs-name, .hs-ip { font-size: 11.5px; }
    .hs-hint { display: none; }
    .nav-left-items { flex-direction: column; padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .hs-item, .hs-name, .hs-ip, .hs-hint { transition: none; }
}