/* ==========================================================
   BASE UI VARIABLES — Configuración visual unificada
   ----------------------------------------------------------
   Este archivo define únicamente los estilos comunes
   (dimensiones, colores, radios, sombras, transiciones, etc.)
   No controla la posición de los módulos, que se define
   dentro de cada CSS individual.
   ========================================================== */

/* === VARIABLES GLOBALES DE ESTILO === */
:root {
  /* --- Tamaños estándar de los botones --- */
  --btn-size: 36px;            /* Ancho y alto de cada botón */
  --icon-size: 18px;           /* Tamaño de los iconos internos */
  --btn-gap: 6px;              /* Separación entre botones dentro de un grupo */

  /* --- Colores y bordes --- */
  --btn-bg: rgba(255, 255, 255, 0.95);          /* Fondo del botón */
  --btn-bg-hover: rgba(245, 245, 245, 0.95);    /* Fondo al pasar el ratón */
  --btn-border: 1px solid rgba(180, 180, 180, 0.6); /* Contorno fino */
  --btn-radius: 8px;                            /* Curvatura de las esquinas */

  /* --- Sombras y relieve --- */
  --btn-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);        /* Sombra base */
  --btn-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.25);  /* Sombra al pasar el ratón */

  /* --- Transiciones generales --- */
  --btn-transition: all 0.2s ease;
}

/* ==========================================================
   BOTONES ESTÁNDAR (base para todos los módulos)
   ========================================================== */

.ui-button {
  width: var(--btn-size);
  height: var(--btn-size);
  background: var(--btn-bg);
  border: var(--btn-border);
  border-radius: var(--btn-radius);
  box-shadow: var(--btn-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--btn-transition);
}

.ui-button:hover {
  background: var(--btn-bg-hover);
  box-shadow: var(--btn-shadow-hover);
  transform: scale(1.05);
}

/* Iconos internos */
.ui-button img {
  width: var(--icon-size);
  height: var(--icon-size);
  object-fit: contain;
  pointer-events: none;
}

/* ==========================================================
   GRUPOS DE BOTONES (horizontal o vertical)
   ========================================================== */

.ui-group {
  display: flex;
  flex-direction: row; /* Cambiar a 'column' si se requiere disposición vertical */
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  background: var(--btn-bg);
  border: var(--btn-border);
  border-radius: var(--btn-radius);
  box-shadow: var(--btn-shadow);
  padding: 4px;
}

/* ==========================================================
   CONTENEDORES DE CONTROL (por módulo)
   ========================================================== */

.ui-control {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--btn-gap);
  z-index: 2147483647; /* Prioridad máxima */
}

/* ==========================================================
   NOTAS Y BUENAS PRÁCTICAS
   ----------------------------------------------------------
   1️⃣ Este archivo define la apariencia general.
       ✦ Si se desea cambiar tamaño, color o sombra,
         hacerlo aquí.
       ✦ Si se desea cambiar posición, hacerlo en el CSS
         de cada módulo (usando --ui-top, --ui-left).

   2️⃣ Ejemplo de uso en un módulo:
       .geo-buscador-control {
         --ui-top: 40px;
         --ui-left: 8px;
         top: var(--ui-top);
         left: var(--ui-left);
       }

   3️⃣ Variables de posición globales (no usar aquí):
       // --ui-top: 40px;
       // --ui-left: 8px;

   4️⃣ Todos los módulos deben incluir el prefijo de clase
       propio (.geo-buscador-control, .measure-control, etc.)
       para evitar conflictos entre módulos.
   ========================================================== */

/* ==========================================================
   NOTAS DE USO
   ----------------------------------------------------------
   1️⃣ Estructura básica de un control:
        <div class="ui-control">
          <button class="ui-button">
            <img src="icons/icon.svg">
          </button>
        </div>

   2️⃣ Si el módulo incluye varios botones:
        <div class="ui-group">
          <button class="ui-button"><img src="icons/tool1.svg"></button>
          <button class="ui-button"><img src="icons/tool2.svg"></button>
        </div>

   3️⃣ Posición personalizada (por módulo):
        Redefinir solo:
            --ui-top   y/o   --ui-left

   4️⃣ Cambios globales en tamaño, color, bordes o sombras:
        Editar aquí las variables raíz.
   ========================================================== */

/* ===============================================================
   VARIABLES — MÓDULO BUSCADOR (mod_buscador)
   =============================================================== */

/* Posición del botón principal del buscador */
:root {
    --buscador-top: 8px;          /* distancia desde la parte superior */
    --buscador-left: 8px;         /* distancia desde el borde izquierdo */
}

/* Botón del buscador */
:root {
    --buscador-btn-size: 36px;                     /* tamaño del botón */
    --buscador-btn-bg: rgba(255,255,255,0.95);
    --buscador-btn-hover-bg: rgba(245,245,245,0.95);
    --buscador-btn-active-bg: #0A56C2;             /* fondo cuando está activo */
    --buscador-btn-active-color: #ffffff;          /* color del icono cuando activo */
    --buscador-btn-border: 1px solid rgba(180,180,180,0.6);
    --buscador-btn-radius: 8px;
    --buscador-btn-shadow: 0 2px 6px rgba(0,0,0,0.25);

    --buscador-icon-size: 22px;                    /* tamaño del icono del botón */
}

/* Caja del buscador */
:root {
    --buscador-box-width: 260px;
    --buscador-box-padding: 8px 10px;
    --buscador-box-bg: #ffffff;
    --buscador-box-radius: 10px;
    --buscador-box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

/* Entrada del buscador */
:root {
    --buscador-input-font-size: 14px;
    --buscador-input-padding: 6px 8px;
    --buscador-input-border: 1px solid #d0d0d0;
    --buscador-input-radius: 6px;
    --buscador-input-focus-border: #0A56C2;
}

/* Resultados del buscador */
:root {
    --buscador-item-font-size: 14px;
    --buscador-item-padding: 6px 8px;
    --buscador-item-hover-bg: #f3f6ff;
    --buscador-item-active-bg: #e0e9ff;
}

/* ==========================================================
   ESTADO ACTIVO (azul corporativo)
   ========================================================== */
.ui-button.gc-active {
  background: #0b5cd7 !important;     /* Azul corporativo */
  border-color: #0b5cd7 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
}

.ui-button.gc-active img {
  filter: brightness(0) invert(1);     /* icono blanco */
}



/* ==========================================================
   RESUMEN DE MODIFICACIONES FUTURAS
   ----------------------------------------------------------
   Tipo de cambio             		| Dónde hacerlo
   ------------------------------|----------------------------
   Cambiar tamaño del botón    	| --btn-size
   Cambiar tamaño del icono  	 	| --icon-size
   Ajustar sombras o bordes    	| --btn-shadow, --btn-border
   Aumentar redondeo             	| --btn-radius
   Separación entre botones      	| --btn-gap
   Orientación (horizontal/vert) 	| --ui-orientation
   Reposicionar módulo           	| --ui-top, --ui-left
   ========================================================== */