/* ============================================================
   XLX Reflector Dashboard — layout.css
   Tema claro/noche (estilo Steam, no muy oscuro / no blanco puro).
   Todas las clases e IDs originales se mantienen para no romper
   el resto de páginas (repeaters.php, modules.php, peers.php...).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');

:root {
   --bg-page        : #CFE1F4;
   --bg-panel       : #DCEAF8;
   --bg-panel-2     : #C5DCF1;
   --border-subtle  : #A6C6E6;
   --text-primary   : #1B2838;
   --text-muted     : #5A7286;
   --accent-blue    : #4A9FDC;
   --accent-blue-soft: #E4F1FB;
   --accent-green   : #6DBE4B;
   --accent-danger  : #E3564B;
   --indalo-color   : #B5502D;
   --shadow-color   : rgba(27,40,56,0.12);
   --font-display   : 'Space Grotesk', 'Segoe UI', sans-serif;
   --font-body      : 'Inter', calibri, verdana, arial, sans-serif;
   --font-mono      : 'IBM Plex Mono', 'Consolas', monospace;
}

/* ---------- Tema noche, estilo Steam (no muy oscuro) ---------- */
:root[data-theme="dark"] {
   --bg-page        : #1B2838;
   --bg-panel       : #22374A;
   --bg-panel-2     : #2A475E;
   --border-subtle  : #3D5773;
   --text-primary   : #DCE6EF;
   --text-muted     : #93AAC0;
   --accent-blue    : #66C0F4;
   --accent-blue-soft: rgba(102,192,244,0.14);
   --accent-green   : #A4D007;
   --accent-danger  : #FF7566;
   --indalo-color   : #E0B15C;
   --shadow-color   : rgba(0,0,0,0.35);
}

* {
   box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
   }
}

body {
   margin               : 0px;
   padding              : 0px;
   background-color     : var(--bg-page);
   font-family          : var(--font-body);
   color                : var(--text-primary);
   min-width            : 760px;
   transition           : background-color .35s ease, color .35s ease;
}

h1 {
   font-family          : var(--font-display);
   font-size            : 22pt;
   font-weight          : 700;
   letter-spacing       : 0.3px;
   color                : var(--text-primary);
}

a {
   color: var(--accent-blue);
}

a.tip {
   text-decoration      : none;
}

a.tip:hover {
   position             : relative;
}

a.tip span {
   display              : none
}

a.tip:hover span {
   background           : var(--bg-panel);
   border               : 1px solid var(--border-subtle);
   opacity              : 0.98;
   border-radius        : 6px;
   font-family          : var(--font-body);
   font-size            : 11pt;
   text-decoration      : none;
   white-space          : nowrap;
   color                : var(--text-primary);
   padding              : 8px 10px;
   margin               : 10px;
   display              : block;
   z-index              : 50;
   position             : absolute;
   top                  : 10px;
   box-shadow           : 0 8px 20px var(--shadow-color);
}

/* ---------- Header ---------- */

#top {
   background-color     : var(--bg-panel);
   width                : 100%;
   position             : relative;
   min-width            : 760px;
   border-bottom        : 1px solid var(--border-subtle);
   color                : var(--text-primary);
   transition           : background-color .35s ease, border-color .35s ease, color .35s ease;
   display              : flex;
   flex-direction       : column;
   justify-content      : center;
   gap                  : 0px;
   padding              : 12px 24px 12px 24px;
   box-sizing           : border-box;
   overflow             : visible;
}

/* Fila superior: el interruptor día/noche se saca del flujo (queda
   flotando a la izquierda) para que no reste ancho al centrado; así
   el bloque escudo-título-escudo se centra de verdad respecto a TODO
   el ancho de la cabecera, sin descuadrarse. Los escudos ahora son
   pequeños (a juego con el texto), así que la fila ya no necesita
   una altura minima grande: la marca el propio texto. */
.top-row {
   position             : relative;
   width                : 100%;
}

/* Interruptor claro/oscuro: flotando a la izquierda, centrado en
   vertical respecto a la altura de la fila (donde están los escudos),
   sin ocupar espacio de la rejilla. */
.toggle-col {
   position             : absolute;
   left                 : 4px;
   top                  : 50%;
   transform            : translateY(-50%);
}

/* Título: ocupa todo el ancho de la fila y se centra de verdad en
   toda la pantalla (igual que antes). Los dos escudos van pegados a
   cada lado del texto, sin tocar su tamaño/altura. */
.title-row {
   width                : 100%;
   display              : flex;
   align-items          : center;
   justify-content      : center;
   gap                  : 14px;
   padding-left         : 90px;
   padding-right        : 90px;
   box-sizing           : border-box;
}

.top-row-right {
   grid-column          : 3;
   justify-self         : end;
   display              : flex;
   flex-direction       : column;
   align-items          : center;
   gap                  : 8px;
}

/* Fila de escudos, uno junto al otro. */
.crests-row {
   display              : flex;
   align-items          : flex-start;
   gap                  : 32px;
}

/* El Ejido se agranda un poco respecto a la caja base (76x100) para
   igualar el grosor/presencia visual de Almería, que tiene un escudo
   más "lleno"; Almería también se agranda un poco para no quedarse
   pequeño en comparación. Tamaño sin tocar; quedan centrados con el
   texto gracias al align-items:center de .title-row. */
.crest-wrap.elejido {
   width                : 90px;
   height               : 116px;
   transform            : translateY(14px);
}

.crest-wrap.almeria {
   width                : 84px;
   height               : 110px;
   transform            : translateY(17px);
}

/* Giro 3D al pasar el ratón por encima de cada escudo */
.crest-wrap {
   perspective          : 600px;
}

/* El giro solo se anima AL ENTRAR el ratón (transition solo en la
   regla :hover). Al salir, el transform vuelve a 0 de golpe, sin
   transición, porque la regla base no la tiene: así no gira "hacia
   atrás" al quitar el ratón. */
.crest-wrap .crest-badge {
   transform-style      : preserve-3d;
   backface-visibility  : visible;
}

.crest-wrap:hover .crest-badge {
   transform            : rotateY(360deg);
   transition           : transform .7s ease;
}

/* Titulo "XLX Multiprotocol Gateway Reflector" con efecto neon, en vez
   del texto alternativo soso de la imagen de header.jpg que no existe
   en el servidor. */
.header-title {
   font-family          : var(--font-display);
   font-weight          : 700;
   font-size            : 22pt;
   letter-spacing       : 0.5px;
   color                : #0E3A5C;
   white-space          : nowrap;
   text-shadow          : 0 0 2px #ffffff,
                           0 0 8px var(--accent-blue),
                           0 0 16px rgba(74,159,220,0.55);
   animation            : neon-pulse 3.2s ease-in-out infinite;
}

:root[data-theme="dark"] .header-title {
   color                : #eaf6ff;
   text-shadow          : 0 0 5px var(--accent-blue),
                           0 0 14px var(--accent-blue),
                           0 0 30px rgba(102,192,244,0.65);
}

@keyframes neon-pulse {
   0%, 100% { opacity: 1;    filter: brightness(1);   }
   50%      { opacity: .88;  filter: brightness(1.15); }
}

@media (prefers-reduced-motion: reduce) {
   .header-title { animation: none; }
}

.top-row-left > img:first-child {
   display              : block;
   max-height           : 72px;
   max-width            : min(35vw, 300px);
   width                : auto;
   height               : auto;
   object-fit           : contain;
   border-radius        : 6px;
   flex-shrink          : 0;
   font-family          : var(--font-body);
   font-size            : 11pt;
   color                : var(--text-primary);
   background-color     : var(--bg-panel);
}

/* Fila inferior: nombre / versión / uptime del reflector, centrado
   y a todo lo ancho de la cabecera; ya no comparte espacio horizontal
   con el logo ni con el Indalo/interruptor, así que nunca se solapan. */
.top-info-row {
   width                : 100%;
   text-align           : center;
}

.brand-text {
   display              : inline-block;
   font-size            : 11pt;
   line-height          : 1.4;
   color                : var(--text-primary);
   max-width            : 100%;
}

#top::after {
   content              : "";
   position             : absolute;
   left                 : 0;
   right                : 0;
   bottom               : -1px;
   height               : 3px;
   background           : linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-green) 100%);
   opacity              : 0.55;
}

/* ---------- Menu bar ---------- */

/* El menu ya no hace scroll horizontal: las pestañas se ajustan al ancho
   de cada pantalla y bajan a una fila nueva si no caben todas, en vez de
   recortarse o exigir scroll lateral. */
#menubar {
   width                : 100%;
   background-color     : var(--bg-panel-2);
   border-bottom        : 1px solid var(--border-subtle);
   padding              : 6px 8px;
   box-sizing           : border-box;
   transition           : background-color .35s ease, border-color .35s ease;
}

#menu {
   padding-left         : 0;
}

#menu table,
#menu tbody {
   display              : block;
   width                : 100%;
}

#menu tr {
   display              : flex;
   flex-wrap            : wrap;
   justify-content      : center;
   row-gap              : 6px;
   column-gap           : 6px;
   width                : 100%;
}

#menu td {
   display              : block;
   padding              : 0;
}

.menulink {
   font-family          : var(--font-body);
   font-size            : 10.5pt;
   font-weight          : 500;
   text-decoration      : none;
   display              : inline-block;
   border               : 1px solid var(--border-subtle);
   padding              : 6px 12px;
   background-color     : var(--bg-panel);
   color                : var(--text-muted);
   border-radius        : 5px;
   transition           : all 0.15s ease;
   white-space          : nowrap;
}

.menulink:hover {
   color                : var(--text-primary);
   border-color         : var(--accent-blue);
   background-color     : var(--accent-blue-soft);
}

.menulink:focus-visible,
.menulinkactive:focus-visible {
   outline              : 2px solid var(--accent-blue);
   outline-offset       : 2px;
}

.menulinkactive {
   font-family          : var(--font-body);
   font-size            : 10.5pt;
   font-weight          : 600;
   text-decoration      : none;
   display              : inline-block;
   border               : 1px solid var(--accent-blue);
   padding              : 6px 12px;
   background-color     : var(--accent-blue-soft);
   color                : var(--accent-blue);
   border-radius        : 5px;
   white-space          : nowrap;
}

/* ---------- Content area ---------- */

#content {
   width                : 100%;
   padding-bottom       : 40px;
}

.pl {
   font-family          : var(--font-body);
   font-size            : 11pt;
   text-decoration      : none;
   color                : var(--text-primary);
}

/* ---------- Tables ---------- */

.listingtable {
   margin-top           : 14px;
   border               : 1px solid var(--border-subtle);
   border-radius        : 8px;
   overflow             : hidden;
   font-family          : var(--font-mono);
   font-size            : 10.5pt;
   background-color     : var(--bg-panel);
   border-collapse      : separate;
   border-spacing       : 0;
   box-shadow           : 0 1px 3px var(--shadow-color);
   transition           : background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.listingtable th {
   height               : 38px;
   text-align           : center;
   font-family          : var(--font-body);
   font-weight          : 600;
   font-size            : 10pt;
   letter-spacing       : 0.4px;
   text-transform       : uppercase;
   color                : var(--text-muted);
   background           : var(--bg-panel-2);
   border-bottom        : 1px solid var(--border-subtle);
   transition           : background-color .35s ease, border-color .35s ease, color .35s ease;
}

/* Algunas páginas (repeaters.php, peers.php, users.php, reflectors.php,
   modules.php) generan filas con bgcolor="#FFFFFF"/"#F1FAFA" en HTML,
   texto envuelto en <b>/<strong>, o color en línea tipo style="color:#000000",
   y las cambian por JavaScript (onMouseOver) al pasar el ratón. Esos son
   "hints" de presentación de prioridad mínima: cualquier regla CSS los
   sustituye, así que forzamos aquí un color de fila coherente con el
   tema (y dejamos el resaltado al pasar el ratón a la regla :hover
   de abajo, que sigue funcionando igual de bien sin el JS antiguo). */
.listingtable tr {
   background-color     : var(--bg-panel);
   transition           : background-color .2s ease;
}

.listingtable tr:nth-child(even) {
   background-color     : var(--bg-panel-2);
}

.listingtable td {
   padding-left         : 10px;
   padding-top          : 6px;
   padding-bottom       : 6px;
   color                : var(--text-primary);
   border-bottom        : 1px solid var(--border-subtle);
   background-color     : transparent;
   transition           : background-color .2s ease, color .35s ease, border-color .35s ease;
}

.listingtable tr:last-child td {
   border-bottom        : none;
}

.listingtable tr:hover td {
   background-color     : var(--accent-blue-soft);
}

.listinglink {
   font-family           : var(--font-mono);
   font-size             : 10.5pt;
   text-decoration       : none;
   /* !important: peers.php añade style="color:#000000" en línea a
      este enlace; sin esto se volvería ilegible en modo noche. */
   color                 : var(--accent-blue) !important;
}

.listinglink:hover {
   text-decoration       : underline;
}

/* En modo noche, cualquier texto en negro metido a mano en el HTML
   generado por las páginas antiguas (negritas sin clase, o con
   style="color:#000000"/"#000" en línea) se vuelve ilegible sobre el
   fondo oscuro. Lo forzamos al color de texto del tema, con la misma
   técnica !important que ya usa .listinglink arriba. */
:root[data-theme="dark"] .listingtable b,
:root[data-theme="dark"] .listingtable strong,
:root[data-theme="dark"] #content b,
:root[data-theme="dark"] #content strong {
   color                 : var(--text-primary) !important;
}

:root[data-theme="dark"] #content [style*="color:#000"],
:root[data-theme="dark"] #content [style*="color: #000"],
:root[data-theme="dark"] #content [style*="color:#111"],
:root[data-theme="dark"] #content [style*="color: #111"],
:root[data-theme="dark"] #content [style*="color:#1B2838"],
:root[data-theme="dark"] #content [style*="color: #1B2838"],
:root[data-theme="dark"] #content [style*="color:#1b2838"],
:root[data-theme="dark"] #content [style*="color: #1b2838"],
:root[data-theme="dark"] #content [style*="color:#333"],
:root[data-theme="dark"] #content [style*="color: #333"] {
   color                 : var(--text-primary) !important;
}

/* Texto normal (no negrita) dentro de las tablas, como "Libre" en los
   módulos: suele traer su propio color apagado en línea (span/font),
   que gana a .listingtable td por especificidad. Lo igualamos al color
   de texto del tema SIN tocar el grosor, para que quede en blanco pero
   sin aparecer en negrita como las filas con nombre. */
:root[data-theme="dark"] .listingtable td,
:root[data-theme="dark"] .listingtable td *,
:root[data-theme="dark"] .listingtable span,
:root[data-theme="dark"] .listingtable font {
   color                 : var(--text-primary) !important;
}

/* Red de seguridad final: si con todo esto sigue habiendo texto oscuro
   heredado del HTML generado por las páginas antiguas, forzamos el
   color de cualquier texto normal dentro de las tablas y el contenido,
   dejando aparte los enlaces (que ya tienen su propio color). */
:root[data-theme="dark"] #content,
:root[data-theme="dark"] #content td,
:root[data-theme="dark"] #content th,
:root[data-theme="dark"] #content p,
:root[data-theme="dark"] #content span,
:root[data-theme="dark"] #content div,
:root[data-theme="dark"] #content li {
   color                 : var(--text-primary) !important;
}

:root[data-theme="dark"] #content a,
:root[data-theme="dark"] #content a.listinglink,
:root[data-theme="dark"] #content a.menulink,
:root[data-theme="dark"] #content a.menulinkactive {
   color                 : var(--accent-blue) !important;
}

/* ---------- Feedback / forms ---------- */

.error {
   font-family       : var(--font-body);
   font-size         : 11pt;
   text-decoration   : none;
   font-weight       : 600;
   color             : var(--accent-danger);
   background-color  : #FDEEEC;
   border            : 1px solid var(--accent-danger);
   border-radius     : 6px;
   width             : 90%;
   padding           : 15px;
   margin            : 5px;
}

:root[data-theme="dark"] .error {
   background-color  : rgba(255,117,102,0.12);
}

.FilterField {
   font-family       : var(--font-mono);
   font-size         : 10pt;
   text-decoration   : none;
   color             : var(--text-primary);
   background-color  : var(--bg-panel);
   width             : 150px;
   height            : 26px;
   padding-left      : 8px;
   border            : 1px solid var(--border-subtle);
   border-radius     : 4px;
   transition        : background-color .3s ease, color .3s ease, border-color .2s ease;
}

.FilterField:focus {
   outline           : none;
   border-color      : var(--accent-blue);
}

.FilterSubmit {
   font-family       : var(--font-body);
   font-size         : 10pt;
   font-weight       : 500;
   text-decoration   : none;
   color             : #FFFFFF;
   background-color  : var(--accent-blue);
   height            : 30px;
   width             : 64px;
   border            : none;
   border-radius     : 4px;
   cursor            : pointer;
   transition        : filter 0.15s ease;
}

.FilterSubmit:hover {
   filter            : brightness(1.08);
}

.smalllink {
   font-family       : var(--font-body);
   font-size         : 11pt;
   text-decoration   : none;
   color             : var(--accent-green);
}

.smalllink:hover {
   text-decoration   : underline;
}

.days-counter {
   margin-top        : 1px;
   margin-bottom     : 0;
   font-family       : var(--font-mono);
   font-size         : 10px;
   color             : var(--text-muted);
   transition        : color .35s ease;
}

.site-contact-link {
   font-family       : var(--font-body);
   color             : var(--text-primary);
   font-size         : 12pt;
   text-decoration   : none;
   transition        : color .3s ease;
}

.site-contact-link:hover {
   color             : var(--accent-blue);
   text-decoration   : underline;
}


/* ============================================================
   AMPLIACIÓN — modo día/noche, efectos de interfaz e Indalo
   (todo lo de arriba se mantiene intacto; esto añade/perfila)
   ============================================================ */

/* Efecto "levantar", resplandor de color y barrido de brillo en las pestañas */
.menulink,
.menulinkactive {
   position          : relative;
   overflow          : hidden;
   transform         : translateY(0) scale(1);
   transition        : transform .18s cubic-bezier(.34,1.56,.64,1),
                        box-shadow .2s ease,
                        color .18s ease,
                        border-color .18s ease,
                        background-color .18s ease;
}

/* barrido de brillo que cruza el botón al pasar el ratón */
.menulink::before,
.menulinkactive::before {
   content           : "";
   position          : absolute;
   top               : 0;
   left              : -60%;
   width             : 45%;
   height            : 100%;
   background        : linear-gradient(115deg, transparent, rgba(255,255,255,0.45), transparent);
   transform         : skewX(-18deg);
   pointer-events    : none;
   transition        : left .55s ease;
}

.menulink:hover::before,
.menulinkactive:hover::before {
   left              : 130%;
}

.menulink:hover {
   transform         : translateY(-2px);
   box-shadow        : 0 6px 14px var(--shadow-color), 0 0 0 3px var(--accent-blue-soft);
}

.menulink:active {
   transform         : translateY(0) scale(.96);
}

.menulinkactive {
   box-shadow        : 0 4px 12px var(--shadow-color), 0 0 0 3px var(--accent-blue-soft);
   transition        : background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}

.menulinkactive:hover {
   transform         : translateY(-2px);
}

.menulinkactive:active {
   transform         : translateY(0) scale(.96);
}

.menulinkactive::after {
   content           : "";
   position          : absolute;
   left              : 10px;
   right             : 10px;
   bottom            : 0;
   height            : 2px;
   background        : linear-gradient(90deg, var(--accent-blue), var(--accent-green));
   border-radius     : 2px;
}

/* Enlaces que salen del reflector: pequeña flecha indicadora */
.menulink[target="_blank"]::after,
.menulinkactive[target="_blank"]::after {
   content           : " \2197";
   font-size         : 9pt;
   opacity           : .6;
   margin-left       : 2px;
}

.menulinkactive[target="_blank"]::after {
   position          : static;
   background        : none;
   height            : auto;
}

/* Botón "Apply" con barrido de brillo, resplandor de color y pulsación */
.FilterSubmit {
   position          : relative;
   overflow          : hidden;
   transition        : filter .15s ease, transform .12s ease, box-shadow .2s ease;
   box-shadow        : 0 2px 6px var(--shadow-color);
}

.FilterSubmit::before {
   content           : "";
   position          : absolute;
   top               : 0;
   left              : -60%;
   width             : 40%;
   height            : 100%;
   background        : linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
   transform         : skewX(-18deg);
   pointer-events    : none;
   transition        : left .5s ease;
}

.FilterSubmit:hover::before {
   left              : 130%;
}

.FilterSubmit:hover {
   filter            : brightness(1.1);
   transform         : translateY(-1px);
   box-shadow        : 0 6px 14px var(--shadow-color), 0 0 0 3px var(--accent-blue-soft);
}

.FilterSubmit:active {
   transform         : translateY(0) scale(.94);
   filter            : brightness(.97);
}

/* Filas de tablas: transición suave al pasar el ratón */
.listingtable tr:hover td {
   transition        : background-color .15s ease;
}

/* ---------- Interruptor Día / Noche ---------- */

.theme-toggle {
   appearance        : none;
   border            : 1px solid var(--border-subtle);
   background-color  : var(--bg-panel-2);
   border-radius     : 999px;
   cursor            : pointer;
   padding           : 3px;
   display           : inline-flex;
   align-items       : center;
   width             : 62px;
   height            : 32px;
   position          : relative;
   transition        : background-color .3s ease, border-color .3s ease;
   flex-shrink       : 0;
   box-shadow        : none;
   outline           : none;
}

.theme-toggle:hover {
   box-shadow        : 0 4px 10px var(--shadow-color), 0 0 0 3px var(--accent-blue-soft);
}

.theme-toggle:active {
   transform         : scale(.93);
}

.theme-toggle:active .theme-toggle-thumb {
   width             : 28px;
}

.theme-toggle:focus-visible {
   outline           : 2px solid var(--accent-blue);
   outline-offset    : 2px;
}

.theme-toggle-track {
   position          : relative;
   width             : 100%;
   height            : 100%;
   display           : flex;
   align-items       : center;
   justify-content   : space-between;
   padding           : 0 5px;
}

.theme-toggle-track svg {
   width             : 15px;
   height            : 15px;
   position          : relative;
   z-index           : 1;
}

.icon-sun {
   fill              : none;
   stroke            : #E3A73A;
   color             : #E3A73A;
}

.icon-moon {
   fill              : #93AAC0;
   stroke            : none;
}

:root[data-theme="dark"] .icon-moon {
   fill              : #DCE6EF;
}

.theme-toggle-thumb {
   position          : absolute;
   top               : 50%;
   left              : 3px;
   width             : 24px;
   height            : 24px;
   border-radius     : 50%;
   background        : var(--bg-panel);
   border            : 1px solid var(--border-subtle);
   box-shadow        : 0 2px 5px var(--shadow-color);
   transform         : translateY(-50%);
   transition        : transform .28s cubic-bezier(.34,1.56,.64,1), background-color .3s ease, border-color .3s ease;
   z-index           : 0;
}

:root[data-theme="dark"] .theme-toggle-thumb {
   transform         : translateY(-50%) translateX(30px);
}

/* ---------- Indalo + interruptor: centrados en la cabecera ---------- */
/* Ocupan la columna central de la rejilla .top-row, que queda centrada
   de verdad porque las dos columnas laterales miden lo mismo (ver
   .top-row más arriba). El nombre del reflector va en su propia fila
   debajo, a todo lo ancho, así nunca se solapan entre sí ni con el
   logo "DVC Working Group" que el diseño original coloca a la derecha. */

.top-center-cluster {
   grid-column       : 2;
   justify-self      : center;
   display           : flex;
   align-items       : center;
   gap               : 14px;
   z-index           : 5;
}

.indalo-badge {
   display           : flex;
   align-items       : center;
   justify-content   : center;
   opacity           : .92;
   flex-shrink       : 0;
}

.indalo-badge .indalo {
   width             : 42px;
   height            : 52px;
   overflow          : visible;
}

.indalo-badge .indalo path,
.indalo-badge .indalo line {
   fill              : none;
   stroke            : var(--indalo-color);
   stroke-width      : 6.5;
   stroke-linecap    : round;
   stroke-linejoin   : round;
   transition        : stroke .35s ease;
}

.indalo-badge .indalo circle {
   fill              : var(--indalo-color);
   transition        : fill .35s ease;
}

/* Escudos de El Ejido / Almería a cada lado del interruptor
   (sustituyen al Indalo dentro de .top-center-cluster).
   Cada escudo va dentro de una caja .crest-wrap de tamaño FIJO e
   IDÉNTICO para los dos, con el escudo centrado dentro por
   object-fit:contain. Así los dos salen exactamente igual de grandes
   y a la misma altura, sin depender de que las dos imágenes tengan el
   mismo margen o la misma proporción de lienzo. */
.crest-wrap {
   width             : 76px;
   height            : 100px;
   display           : flex;
   align-items       : center;
   justify-content   : center;
   flex-shrink       : 0;
}

.crest-badge {
   max-width         : 100%;
   max-height        : 100%;
   width             : auto;
   height            : auto;
   object-fit        : contain;
   display           : block;
   filter            : drop-shadow(0 1px 2px var(--shadow-color));
}

@media (max-width: 900px) {
   #top {
      padding        : 14px 12px 10px 12px;
      text-align     : center;
   }
   .top-row {
      grid-template-columns: 1fr;
      row-gap        : 10px;
      justify-items  : center;
   }
   .top-row > img {
      grid-column    : 1;
      justify-self   : center;
      max-width      : 80%;
   }
   .top-center-cluster {
      grid-column    : 1;
   }
   .brand-text {
      text-align     : center;
   }
}